@blueprintjs/select

property defaultProps

static defaultProps: { fill: boolean; placeholder: string };

property displayName

static displayName: string;

property input

input: HTMLInputElement;

property queryList

queryList: QueryList<T>;

property state

state: IMultiSelectState;

method componentDidUpdate

componentDidUpdate: (prevProps: MultiSelectProps<T>) => void;

method ofType

static ofType: <U>() => new (props: MultiSelectProps<U>) => MultiSelect<U>;

method render

render: () => JSX.Element;

property displayName

static displayName: string;

method ofType

static ofType: <U>() => new (props: OmnibarProps<U>) => Omnibar<U>;

method render

render: () => JSX.Element;

constructor

constructor(props: QueryListProps<T>, context?: any);

property defaultProps

static defaultProps: { disabled: boolean; resetOnQuery: boolean };

property displayName

static displayName: string;

method componentDidUpdate

componentDidUpdate: (prevProps: QueryListProps<T>) => void;

method ofType

static ofType: <U>() => new (props: QueryListProps<U>) => QueryList<U>;

method render

render: () => JSX.Element;

method scrollActiveItemIntoView

scrollActiveItemIntoView: () => void;

method setActiveItem

setActiveItem: (activeItem: T | ICreateNewItem | null) => void;

method setQuery

setQuery: (
    query: string,
    resetActiveItem?: boolean | undefined,
    props?: Readonly<QueryListProps<T>> &
        Readonly<{ children?: React.ReactNode }>
) => void;

property displayName

static displayName: string;

property inputElement

inputElement: HTMLInputElement;

property state

state: ISelectState;

method componentDidUpdate

componentDidUpdate: (prevProps: SelectProps<T>, prevState: ISelectState) => void;

method ofType

static ofType: <U>() => new (props: SelectProps<U>) => Select<U>;

method render

render: () => JSX.Element;

property defaultProps

static defaultProps: Partial<SuggestProps<any>>;

property displayName

static displayName: string;

property inputElement

inputElement: HTMLInputElement;

property state

state: ISuggestState<T>;

method componentDidUpdate

componentDidUpdate: (
    prevProps: SuggestProps<T>,
    prevState: ISuggestState<T>
) => void;

method ofType

static ofType: <U>() => new (props: SuggestProps<U>) => Suggest<U>;

method render

render: () => JSX.Element;

property activeItem

activeItem: T | ICreateNewItem | null;

• The currently focused item (for keyboard interactions), or null to indicate that no item is active.

property filteredItems

filteredItems: T[];

• Array of items filtered by itemListPredicate or itemPredicate. See items for the full list of items.

  Use renderFilteredItems() utility function from this library to map each item in this array through renderItem, with support for optional noResults and initialContent states.

property items

items: T[];

• Array of all items in the list. See filteredItems for a filtered array based on query and predicate props.

property itemsParentRef

itemsParentRef: IRef<HTMLUListElement>;

• A ref handler that should be attached to the parent HTML element of the menu items. This is required for the active item to scroll into view automatically.

property query

query: string;

• The current query string.

property renderCreateItem

renderCreateItem: () => JSX.Element | null | undefined;

• Call this function to render the "create new item" view component.

  Returns

  null when creating a new item is not available, and undefined if the createNewItemRenderer returns undefined

property renderItem

renderItem: (item: T, index: number) => JSX.Element | null;

• Call this function to render an item. This retrieves the modifiers for the item and delegates actual rendering to the owner component's itemRenderer prop.

property active

active: boolean;

• Whether this is the "active" (focused) item, meaning keyboard interactions will act upon it.

property disabled

disabled: boolean;

• Whether this item is disabled and should ignore interactions.

property matchesPredicate

matchesPredicate: boolean;

• Whether this item matches the predicate. A typical renderer could hide false values.

property handleClick

handleClick: MouseEventHandler<HTMLElement>;

• Click event handler to select this item.

property handleFocus

handleFocus?: () => void;

• Focus event handler to set this as the "active" item.

  N.B. this is optional to preserve back-compat; it will become required in the next major version.

property index

index?: number;

property modifiers

modifiers: IItemModifiers;

• Modifiers that describe how to render this item, such as active or disabled.

property query

query: string;

• The current query string used to filter the items.

property activeItem

activeItem?: T | ICreateNewItem | null;

• The currently focused item for keyboard interactions, or null to indicate that no item is active. If omitted or undefined, this prop will be uncontrolled (managed by the component's state). Use onActiveItemChange to listen for updates.

property createNewItemFromQuery

createNewItemFromQuery?: (query: string) => T;

• If provided, allows new items to be created using the current query string. This is invoked when user interaction causes a new item to be created, either by pressing the Enter key or by clicking on the "Create Item" option. It transforms a query string into an item type.

property createNewItemPosition

createNewItemPosition?: 'first' | 'last';

• Determines the position of the createNewItem within the list: first or last. Only relevant when createNewItemRenderer is defined.

  'last'

property createNewItemRenderer

createNewItemRenderer?: (
    query: string,
    active: boolean,
    handleClick: React.MouseEventHandler<HTMLElement>
) => JSX.Element | undefined;

• Custom renderer to transform the current query string into a selectable "Create Item" option. If this function is provided, a "Create Item" option will be rendered at the end of the list of items. If this function is not provided, a "Create Item" option will not be displayed.

property initialContent

initialContent?: React.ReactNode | null;

• React content to render when query is empty. If omitted, all items will be rendered (or result of itemListPredicate with empty query). If explicit null, nothing will be rendered when query is empty.

  This prop is ignored if a custom itemListRenderer is supplied.

property itemDisabled

itemDisabled?: keyof T | ((item: T, index: number) => boolean);

• Determine if the given item is disabled. Provide a callback function, or simply provide the name of a boolean property on the item that exposes its disabled state.

property itemListPredicate

itemListPredicate?: ItemListPredicate<T>;

• Customize querying of entire items array. Return new list of items. This method can reorder, add, or remove items at will. (Supports filter algorithms that operate on the entire set, rather than individual items.)

  If itemPredicate is also defined, this prop takes priority and the other will be ignored.

property itemListRenderer

itemListRenderer?: ItemListRenderer<T>;

• Custom renderer for the contents of the dropdown.

  The default implementation invokes itemRenderer for each item that passes the predicate and wraps them all in a Menu element. If the query is empty then initialContent is returned, and if there are no items that match the predicate then noResults is returned.

property itemPredicate

itemPredicate?: ItemPredicate<T>;

• Customize querying of individual items.

  __Filtering a list of items.__ This function is invoked to filter the list of items as a query is typed. Return true to keep the item, or false to hide. This method is invoked once for each item, so it should be performant. For more complex queries, use itemListPredicate to operate once on the entire array. For the purposes of filtering the list, this prop is ignored if itemListPredicate is also defined.

  __Matching a pasted value to an item.__ This function is also invoked to match a pasted value to an existing item if possible. In this case, the function will receive exactMatch=true, and the function should return true only if the item _exactly_ matches the query. For the purposes of matching pasted values, this prop will be invoked even if itemListPredicate is defined.

property itemRenderer

itemRenderer: ItemRenderer<T>;

• Custom renderer for an item in the dropdown list. Receives a boolean indicating whether this item is active (selected by keyboard arrows) and an onClick event handler that should be attached to the returned element.

property items

items: T[];

• Array of items in the list.

property itemsEqual

itemsEqual?: ItemsEqualProp<T>;

• Specifies how to test if two items are equal. By default, simple strict equality (===) is used to compare two items.

  If your items have a unique identifier field, simply provide the name of a property on the item that can be compared with strict equality to determine equivalence: itemsEqual="id" will check a.id === b.id.

  If more complex comparison logic is required, provide an equality comparator function that returns true if the two items are equal. The arguments to this function will never be null or undefined, as those values are handled before calling the function.

property noResults

noResults?: React.ReactNode;

• React content to render when filtering items returns zero results. If omitted, nothing will be rendered in this case.

  This prop is ignored if a custom itemListRenderer is supplied.

property onActiveItemChange

onActiveItemChange?: (activeItem: T | null, isCreateNewItem: boolean) => void;

• Invoked when user interaction should change the active item: arrow keys move it up/down in the list, selecting an item makes it active, and changing the query may reset it to the first item in the list if it no longer matches the filter.

  If the "Create Item" option is displayed and currently active, then isCreateNewItem will be true and activeItem will be null. In this case, you should provide a valid ICreateNewItem object to the activeItem _prop_ in order for the "Create Item" option to appear as active.

  __Note:__ You can instantiate a ICreateNewItem object using the getCreateNewItem() utility exported from this package.

property onItemSelect

onItemSelect: (item: T, event?: React.SyntheticEvent<HTMLElement>) => void;

• Callback invoked when an item from the list is selected, typically by clicking or pressing enter key.

property onItemsPaste

onItemsPaste?: (items: T[]) => void;

• Callback invoked when multiple items are selected at once via pasting.

property onQueryChange

onQueryChange?: (
    query: string,
    event?: React.ChangeEvent<HTMLInputElement>
) => void;

• Callback invoked when the query string changes.

property query

query?: string;

• Query string passed to itemListPredicate or itemPredicate to filter items. This value is controlled: its state must be managed externally by attaching an onChange handler to the relevant element in your renderer implementation.

property resetOnQuery

resetOnQuery?: boolean;

• Whether the active item should be reset to the first matching item _every time the query changes_ (via prop or by user input).

  true

property resetOnSelect

resetOnSelect?: boolean;

• Whether the active item should be reset to the first matching item _when an item is selected_. The query will also be reset to the empty string.

  false

property scrollToActiveItem

scrollToActiveItem?: boolean;

• When activeItem is controlled, whether the active item should _always_ be scrolled into view when the prop changes. If false, only changes that result from built-in interactions (clicking, querying, or using arrow keys) will scroll the active item into view. Ignored if the activeItem prop is omitted (uncontrolled behavior).

  true

property fill

fill?: boolean;

• Whether the component should take up the full width of its container. This overrides popoverProps.fill and tagInputProps.fill.

property onRemove

onRemove?: (value: T, index: number) => void;

• Callback invoked when an item is removed from the selection by removing its tag in the TagInput. This is generally more useful than tagInputProps.onRemove because it receives the removed value instead of the value's rendered ReactNode tag.

  It is not recommended to supply _both_ this prop and tagInputProps.onRemove.

property openOnKeyDown

openOnKeyDown?: boolean;

• If true, the component waits until a keydown event in the TagInput before opening its popover.

  If false, the popover opens immediately after a mouse click focuses the component's TagInput.

  N.B. the behavior of this prop differs slightly from the same one in the Suggest component; see https://github.com/palantir/blueprint/issues/4152.

  false

property placeholder

placeholder?: string;

• Input placeholder text. Shorthand for tagInputProps.placeholder.

  "Search..."

property popoverProps

popoverProps?: Partial<IPopoverProps> & object;

• Props to spread to Popover. Note that content cannot be changed.

property selectedItems

selectedItems?: T[];

• Controlled selected values.

property tagInputProps

tagInputProps?: Partial<TagInputProps> & object;

• Props to spread to TagInput. Use query and onQueryChange to control the input.

property tagRenderer

tagRenderer: (item: T) => React.ReactNode;

• Custom renderer to transform an item into tag content.

property isOpen

isOpen: boolean;

property inputProps

inputProps?: InputGroupProps2;

• Props to spread to the query InputGroup. Use query and onQueryChange instead of inputProps.value and inputProps.onChange to control this input.

property isOpen

isOpen: boolean;

• Toggles the visibility of the omnibar. This prop is required because the component is controlled.

property onClose

onClose?: (event?: React.SyntheticEvent<HTMLElement>) => void;

• A callback that is invoked when user interaction causes the omnibar to close, such as clicking on the overlay or pressing the esc key (if enabled). Receives the event from the user's interaction, if there was an event (generally either a mouse or key event).

  Note that due to controlled usage, this component will not actually close itself until the isOpen prop becomes false. .

property overlayProps

overlayProps?: Partial<OverlayProps>;

• Props to spread to Overlay.

property disabled

disabled?: boolean;

• Whether the list is disabled.

  false

property initialActiveItem

initialActiveItem?: T;

• Initial active item, useful if the parent component is controlling its selectedItem but not activeItem.

property onKeyDown

onKeyDown?: React.KeyboardEventHandler<HTMLElement>;

• Callback invoked when user presses a key, after processing QueryList's own key events (up/down to navigate active item). This callback is passed to renderer and (along with onKeyUp) can be attached to arbitrary content elements to support keyboard selection.

property onKeyUp

onKeyUp?: React.KeyboardEventHandler<HTMLElement>;

• Callback invoked when user releases a key, after processing QueryList's own key events (enter to select active item). This callback is passed to renderer and (along with onKeyDown) can be attached to arbitrary content elements to support keyboard selection.

property renderer

renderer: (listProps: IQueryListRendererProps<T>) => JSX.Element;

• Customize rendering of the component. Receives an object with props that should be applied to elements as necessary.

property handleItemSelect

handleItemSelect: (item: T, event?: React.SyntheticEvent<HTMLElement>) => void;

• Selection handler that should be invoked when a new item has been chosen, perhaps because the user clicked it.

property handleKeyDown

handleKeyDown: React.KeyboardEventHandler<HTMLElement>;

• Keyboard handler for up/down arrow keys to shift the active item. Attach this handler to any element that should support this interaction.

property handleKeyUp

handleKeyUp: React.KeyboardEventHandler<HTMLElement>;

• Keyboard handler for enter key to select the active item. Attach this handler to any element that should support this interaction.

property handlePaste

handlePaste: (queries: string[]) => void;

• Handler that should be invoked when the user pastes one or more values.

  This callback will use itemPredicate with exactMatch=true to find a subset of items exactly matching the pasted values provided, then it will invoke onItemsPaste with those found items. Each pasted value that does not exactly match an item will be ignored.

  If creating items is enabled (by providing both createNewItemFromQuery and createNewItemRenderer), then pasted values that do not exactly match an existing item will emit a new item as created via createNewItemFromQuery.

  If itemPredicate returns multiple matching items for a particular query in queries, then only the first matching item will be emitted.

property handleQueryChange

handleQueryChange: React.ChangeEventHandler<HTMLInputElement>;

• Change handler for query string. Attach this to an input element to allow QueryList to control the query.

property itemList

itemList: React.ReactNode;

• Rendered elements returned from itemListRenderer prop.

property activeItem

activeItem: T | ICreateNewItem | null;

• The currently focused item (for keyboard interactions).

property createNewItem

createNewItem: T | undefined;

• The item returned from createNewItemFromQuery(this.state.query), cached to avoid continuous reinstantions within isCreateItemRendered, where this element will be used to hide the "Create Item" option if its value matches the current query.

property filteredItems

filteredItems: T[];

• The original items array filtered by itemListPredicate or itemPredicate.

property query

query: string;

• The current query string.

property children

children?: React.ReactNode;

property disabled

disabled?: boolean;

• Whether the component is non-interactive. If true, the list's item renderer will not be called. Note that you'll also need to disable the component's children, if appropriate.

  false

property fill

fill?: boolean;

• Whether the component should take up the full width of its container. This overrides popoverProps.fill. You also have to ensure that the child component has fill set to true or is styled appropriately.

property filterable

filterable?: boolean;

• Whether the dropdown list can be filtered. Disabling this option will remove the InputGroup and ignore inputProps.

  true

property inputProps

inputProps?: InputGroupProps2;

• Props to spread to the query InputGroup. Use query and onQueryChange instead of inputProps.value and inputProps.onChange to control this input.

property matchTargetWidth

matchTargetWidth?: boolean;

• Whether the select popover should be styled so that it matches the width of the target. This is done using a popper.js modifier passed through popoverProps.

  Note that setting matchTargetWidth={true} will also set popoverProps.usePortal={false} and popoverProps.wrapperTagName="div".

  false

property popoverProps

popoverProps?: Partial<IPopoverProps> & object;

• Props to spread to Popover. Note that content cannot be changed.

property resetOnClose

resetOnClose?: boolean;

• Whether the active item should be reset to the first matching item _when the popover closes_. The query will also be reset to the empty string.

  false

property isOpen

isOpen: boolean;

property closeOnSelect

closeOnSelect?: boolean;

• Whether the popover should close after selecting an item.

  true

property defaultSelectedItem

defaultSelectedItem?: T;

• The uncontrolled default selected item. This prop is ignored if selectedItem is used to control the state.

property disabled

disabled?: boolean;

• Whether the input field should be disabled.

property fill

fill?: boolean;

• Whether the component should take up the full width of its container. This overrides popoverProps.fill and inputProps.fill.

property inputProps

inputProps?: InputGroupProps2;

• Props to spread to the query InputGroup. To control this input, use query and onQueryChange instead of inputProps.value and inputProps.onChange.

property inputValueRenderer

inputValueRenderer: (item: T) => string;

• Custom renderer to transform an item into a string for the input value.

property openOnKeyDown

openOnKeyDown?: boolean;

• If true, the component waits until a keydown event in the TagInput before opening its popover.

  If false, the popover opens immediately after a mouse click or TAB key interaction focuses the component's TagInput.

  false

property popoverProps

popoverProps?: Partial<IPopoverProps> & object;

• Props to spread to Popover. Note that content cannot be changed.

property resetOnClose

resetOnClose?: boolean;

• Whether the active item should be reset to the first matching item _when the popover closes_. The query will also be reset to the empty string.

  false

property selectedItem

selectedItem?: T | null;

• The currently selected item, or null to indicate that no item is selected. If omitted or undefined, this prop will be uncontrolled (managed by the component's state). Use onItemSelect to listen for updates.

property isOpen

isOpen: boolean;

property selectedItem

selectedItem: T | null;

variable MULTISELECT

const MULTISELECT: string;

variable MULTISELECT_POPOVER

const MULTISELECT_POPOVER: string;

variable MULTISELECT_TAG_INPUT_INPUT

const MULTISELECT_TAG_INPUT_INPUT: string;

variable OMNIBAR

const OMNIBAR: string;

variable OMNIBAR_OVERLAY

const OMNIBAR_OVERLAY: string;

variable SELECT

const SELECT: string;

variable SELECT_MATCH_TARGET_WIDTH

const SELECT_MATCH_TARGET_WIDTH: string;

variable SELECT_POPOVER

const SELECT_POPOVER: string;