Override default "input" component, the search in the content
Usage
inputRenderer={
({ props, state, methods, inputRef }) => <component ref={inputRef}/>
}
Override default "input" component, the search in the content
inputRenderer={
({ props, state, methods, inputRef }) => <component ref={inputRef}/>
}
| Prop | Type | Default | Description |
|---|---|---|---|
| values | array | [] | Selected values |
| options | array | [] | Available options, (option with key disabled: true will be disabled) |
| keepOpen | bool | false | If true, dropdown will always stay open (good for debugging) |
| autoFocus | bool | false | If true, and searchable, dropdown will auto focus |
| clearOnBlur | bool | true | If true, and searchable, search value will be cleared on blur |
| clearOnSelect | bool | true | If true, and searchable, search value will be cleared upon value select/de-select |
| name | string | null | If set, input type hidden would be added in the component with the value of the name prop as name and select's values as value |
| required | bool | false | If set, input type hidden would be added in the component with required prop as true/false |
| pattern | string | null | If set, input type hidden would be added in the component with pattern prop as regex |
| dropdownGap | number | 5 | Gap between select element and dropdown |
| multi | bool | false | If true - will act as multi-select, if false - only one option will be selected at the time |
| placeholder | string | "Select..." | Placeholder shown where there are no selected values |
| addPlaceholder | string | "" | Secondary placeholder on search field if any value selected |
| disabled | bool | false | Disable select and all interactions |
| style | object | {} | Style object to pass to select |
| className | string | CSS class attribute to pass to select | |
| loading | bool | false | Loading indicator |
| clearable | bool | false | Clear all indicator |
| searchable | bool | true | If true, select will have search input text |
| separator | bool | false | Separator line between close all and dropdown handle |
| dropdownHandle | bool | true | Dropdown handle to open/close dropdown |
| dropdownHeight | string | "300px" | Minimum height of a dropdown |
| direction | string | "ltr" | direction of a dropdown "ltr", "rtl" or "auto" |
| searchBy | string | label | Search by object property (or nested property with dot notation) in values |
| sortBy | string | null | Sort by object property (or nested property with dot notation) in values |
| labelField | string | "label" | Field (or nested property with dot notation) in data to use for label |
| valueField | string | "value" | Field (or nested property with dot notation) in data to use for value |
| color | string | "#0074D9" | Base color to use in component, also can be overwritten via CSS |
| closeOnScroll | bool | false | If true, scrolling the page will close the dropdown |
| closeOnSelect | bool | false | If true, selecting option will close the dropdown |
| dropdownPosition | string | "bottom" | Available options are "auto", "top" and "bottom" defaults to "bottom". Auto will adjust itself according Select's position on the page |
| keepSelectedInList | bool | true | If false, selected item will not appear in a list |
| portal | DOM element | false | If valid dom element specified - dropdown will break out to render inside the specified element |
| create | bool | false | If true, select will create value from search string and fire onCreateNew callback prop |
| backspaceDelete | bool | true | If true, backspace key will delete last value |
| createNewLabel | string | "add {search}" | If create set to true, this will be the label of the "add new" component. {search} will be replaced by search value |
| disabledLabel | string | "disabled" | Label shown on disabled field (after) the text |
| additionalProps | object | null | Additional props to pass to Select |
by using renderer props to override components some of the functionality will have to be handled manually with a help of internal props, states and methods exposed
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange | func | On values change callback, returns array of values objects | |
| onDropdownClose | func | Fires upon dropdown close | |
| onDropdownOpen | func | Fires upon dropdown open | |
| onCreateNew | func | Fires upon creation of new item if create prop set to true |
|
| onClearAll | func | Fires upon clearing all values (via custom renderers) | |
| onSelectAll | func | Fires upon selecting all values (via custom renderers) | |
| onDropdownCloseRequest | func | undefined | Fires upon dropdown closing state, stops the closing and provides own method close() |
| contentRenderer | func | Overrides internal content component (the contents of the select component) | |
| itemRenderer | func | Overrides internal item in a dropdown | |
| noDataRenderer | func | Overrides internal "no data" (shown where search has no results) | |
| optionRenderer | func | Overrides internal option (the pillow with an "x") on the select content | |
| inputRenderer | func | Overrides internal input text | |
| loadingRenderer | func | Overrides internal loading | |
| clearRenderer | func | Overrides internal clear button | |
| separatorRenderer | func | Overrides internal separator | |
| dropdownRenderer | func | Overrides internal dropdown component | |
| dropdownHandleRenderer | func | Overrides internal dropdown handle | |
| searchFn | func | undefined | Overrides internal search function |
| handleKeyDownFn | func | undefined | Overrides internal keyDown function |
Access to current state of <Select/> component
| Property | Return | Description |
|---|---|---|
| dropdown | boolean | check if dropdown is open |
| values | array | selected value(s) |
| search | string | current search string |
| searchResults | string | Filtered search results |
|
| selectBounds | object | current getBoundingClientRect() of <Select/> |
| Method | Arguments | Return | Description |
|---|---|---|---|
| removeItem(event, item, false) | event: eventEmitter | null item: object closeModal: boolean |
undefined | event used to stop propagation |
| dropDown('toggle') | string: open|close|toggle | undefined | one of open, close or toggle |
| addItem(item) | item: object | true | |
| setSearch(event) | event: eventEmitter | undefined | expects to get event with { target: { value } } |
| getInputSize() | - | number | input character count |
| toggleSelectAll() | - | undefined | |
| clearAll() | - | undefined | |
| selectAll([]) | - | undefined | will select all values except disabled or a list of values provided as first parameter |
| isSelected(item) | item: object | boolean | |
| searchResults() | - | array | returns array of items matching /item.label/i regex, if searchBy prop is used - matches against it's value |
| selectRef() | - | DOM node | returns DOM element of <Select/> |
| getSelectBounds() | - | object | returns getBoundingClientRect() of <Select/> |
| areAllSelected() | - | boolean | returns true/false if all values (except disabled) selected |
| sortBy() | - | array | returns sorted array of values (sort field defined by sortBy prop) |
| safeString() | string: string | string | returns cleaned up (safe) string |