# AsyncCreatableSelectInput ## Description An input component getting a selection from an asynchronously loaded list from the user, and where options can be created by the user. ## Installation ``` pnpm add @commercetools-uikit/async-creatable-select-input ``` ``` npm --save install @commercetools-uikit/async-creatable-select-input ``` Additionally install the peer dependencies (if not present) ``` pnpm add react react-dom react-intl ``` ``` npm --save install react react-dom react-intl ``` ## Usage ```jsx import AsyncCreatableSelectInput from '@commercetools-uikit/async-creatable-select-input'; const Example = (props) => ( alert(event.target.value)} loadOptions={() => Promise.resolve([ { value: 'one', label: 'One' }, { value: 'two', label: 'Two' }, ]) } /> ); export default Example; ``` ## Properties | Props | Type | Required | Default | Description | | ------------------------- | ----------------------------------------------------------------------------------------------------- | :------: | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input fields. | | `hasError` | `boolean` | | | Indicates the input field has an error | | `hasWarning` | `boolean` | | | Indicates the input field has a warning | | `isReadOnly` | `boolean` | | | Is the select read-only | | `iconLeft` | `ReactNode` | | | Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled. | | `aria-label` | `AsyncCreatableProps['aria-label']` | | | Aria label (for assistive tech)
[Props from React select was used](https://react-select.com/props) | | `aria-labelledby` | `AsyncCreatableProps['aria-labelledby']` | | | HTML ID of an element that should be used as the label (for assistive tech)
[Props from React select was used](https://react-select.com/props) | | `aria-invalid` | `AsyncCreatableProps['aria-invalid']` | | | Indicate if the value entered in the input is invalid.
[Props from React select was used](https://react-select.com/props) | | `aria-errormessage` | `AsyncCreatableProps['aria-errormessage']` | | | HTML ID of an element containing an error message related to the input.
[Props from React select was used](https://react-select.com/props) | | `isAutofocussed` | `boolean` | | | Focus the control when it is mounted | | `backspaceRemovesValue` | `AsyncCreatableProps['backspaceRemovesValue']` | | | Remove the currently focused option when the user presses backspace
[Props from React select was used](https://react-select.com/props) | | `components` | `AsyncCreatableProps['components']` | | | Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
[Props from React select was used](https://react-select.com/props) | | `filterOption` | `AsyncCreatableProps['filterOption']` | | | Custom method to filter whether an option should be displayed in the menu
[Props from React select was used](https://react-select.com/props) | | `id` | `AsyncCreatableProps['inputId']` | | | The id of the search input
[Props from React select was used](https://react-select.com/props) | | `inputValue` | `AsyncCreatableProps['inputValue']` | | | The value of the search input
[Props from React select was used](https://react-select.com/props) | | `containerId` | `AsyncCreatableProps['id']` | | | The id to set on the SelectContainer component
[Props from React select was used](https://react-select.com/props) | | `isClearable` | `AsyncCreatableProps['isClearable']` | | | Is the select value clearable
[Props from React select was used](https://react-select.com/props) | | `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `isDisabled` | `AsyncCreatableProps['isDisabled']` | | | Is the select disabled
[Props from React select was used](https://react-select.com/props) | | `isOptionDisabled` | `AsyncCreatableProps['isOptionDisabled']` | | | Override the built-in logic to detect whether an option is disabled
[Props from React select was used](https://react-select.com/props) | | `isMulti` | `AsyncCreatableProps['isMulti']` | | | Support multiple selected options
[Props from React select was used](https://react-select.com/props) | | `isSearchable` | `AsyncCreatableProps['isSearchable']` | | `true` | Whether to enable search functionality
[Props from React select was used](https://react-select.com/props) | | `maxMenuHeight` | `AsyncCreatableProps['maxMenuHeight']` | | | Maximum height of the menu before scrolling
[Props from React select was used](https://react-select.com/props) | | `menuPortalTarget` | `AsyncCreatableProps['menuPortalTarget']` | | | Dom element to portal the select menu to
[Props from React select was used](https://react-select.com/props) | | `menuPortalZIndex` | `number` | | `1` | z-index value for the menu portal
Use in conjunction with `menuPortalTarget` | | `menuShouldBlockScroll` | `AsyncCreatableProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
[Props from React select was used](https://react-select.com/props) | | `closeMenuOnSelect` | `AsyncCreatableProps['closeMenuOnSelect']` | | | Whether the menu should close after a value is selected. Defaults to `true`.
[Props from React select was used](https://react-select.com/props) | | `name` | `AsyncCreatableProps['name']` | | | Name of the HTML Input (optional - without this, no input will be rendered)
[Props from React select was used](https://react-select.com/props) | | `noOptionsMessage` | `AsyncCreatableProps['noOptionsMessage']` | | | Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
[Props from React select was used](https://react-select.com/props) | | `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Handle blur events on the control | | `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`. | | `onFocus` | `AsyncCreatableProps['onFocus']` | | | Handle focus events on the control
[Props from React select was used](https://react-select.com/props) | | `onInputChange` | `AsyncCreatableProps['onInputChange']` | | | Handle change events on the input
[Props from React select was used](https://react-select.com/props) | | `placeholder` | `AsyncCreatableProps['placeholder']` | | | Placeholder text for the select value
[Props from React select was used](https://react-select.com/props) | | `tabIndex` | `AsyncCreatableProps['tabIndex']` | | | Sets the tabIndex attribute on the input
[Props from React select was used](https://react-select.com/props) | | `tabSelectsValue` | `AsyncCreatableProps['tabSelectsValue']` | | | Select the currently focused option when the user presses tab
[Props from React select was used](https://react-select.com/props) | | `value` | `AsyncCreatableProps['value']` | | `null` | The value of the select; reflected by the selected option
[Props from React select was used](https://react-select.com/props) | | `defaultOptions` | `AsyncCreatableProps['defaultOptions']` | | | The default set of options to show before the user starts searching. When set to true, the results for loadOptions('') will be autoloaded.
[Props from React select was used](https://react-select.com/props) | | `loadOptions` | `AsyncCreatableProps['loadOptions']` | ✅ | | Function that returns a promise, which is the set of options to be used once the promise resolves.
[Props from React select was used](https://react-select.com/props) | | `cacheOptions` | `AsyncCreatableProps['cacheOptions']` | | | If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
[Props from React select was used](https://react-select.com/props) | | `allowCreateWhileLoading` | `AsyncCreatableProps['allowCreateWhileLoading']` | | | Allow options to be created while the isLoading prop is true. Useful to prevent the "create new ..." option being displayed while async results are still being loaded.
[Props from React select was used](https://react-select.com/props) | | `formatCreateLabel` | `AsyncCreatableProps['formatCreateLabel']` | | | Gets the label for the "create new ..." option in the menu. Is given the current input value.
[Props from React select was used](https://react-select.com/props) | | `isValidNewOption` | `AsyncCreatableProps['isValidNewOption']` | | | Determines whether the "create new ..." option should be displayed based on the current input value, select value and options array.
[Props from React select was used](https://react-select.com/props) | | `getNewOptionData` | `AsyncCreatableProps['getNewOptionData']` | | | Returns the data for the new option when it is created. Used to display the value, and is passed to onChange.
[Props from React select was used](https://react-select.com/props) | | `onCreateOption` | `AsyncCreatableProps['onCreateOption']` | | | If provided, this will be called with the input value when a new option is created, and onChange will not be called. Use this when you need more control over what happens when new options are created.
[Props from React select was used](https://react-select.com/props) | | `createOptionPosition` | `AsyncCreatableProps['createOptionPosition']` | | | Sets the position of the createOption element in your options list.
[Props from React select was used](https://react-select.com/props) | | `showOptionGroupDivider` | `boolean` | | | Determines if option groups will be separated by a divider | ## Signatures ### Signature `onBlur` ```ts (event: TCustomEvent) => void ``` ### Signature `onChange` ```ts (event: TCustomEvent, info: ActionMeta) => void ``` This input is built on top of [`react-select`](https://github.com/JedWatson/react-select) v2. It supports mostly same properties as `react-select`. Behaviour for some props was changed, and support for others was dropped. In case you need one of the currently excluded props, feel free to open a PR adding them. ### Static Properties #### `isTouched(touched)` Returns truthy value for the Formik `touched` value of this input field. ## Components It is possible to customize `AsyncCreatableSelectInput` by passing the `components` property. `AsyncCreatableSelectInput` exports the default underlying components as static exports. Components available as static exports are: - `ClearIndicator` - `Control` - `CrossIcon` - `DownChevron` - `DropdownIndicator` - `Group` - `GroupHeading` - `IndicatorsContainer` - `IndicatorSeparator` - `Input` - `LoadingIndicator` - `LoadingMessage` - `Menu` - `MenuList` - `MenuPortal` - `MultiValue` - `MultiValueContainer` - `MultiValueLabel` - `MultiValueRemove` - `NoOptionsMessage` - `Option` - `Placeholder` - `SelectContainer` - `SingleValue` - `ValueContainer` See the [official documentation](https://react-select.com/components) for more information about the props they receive.