@commercetools-uikit/search-select-input NPM

SearchSelectInput

Description

A search select input component built on top of `@commercetools-uikit/async-select-input` to asynchronously load results (options) using the keyword that the user has entered.

Installation

yarn add @commercetools-uikit/search-select-input

npm --save install @commercetools-uikit/search-select-input

Additionally install the peer dependencies (if not present)

yarn add react react-dom react-intl

npm --save install react react-dom react-intl

Usage

import SearchSelectInput from '@commercetools-uikit/search-select-input';

const Example = () => {
  return (
    <SearchSelectInput
      id="customers"
      name="customers"
      horizontalConstraint={7}
      optionType="single-lined"
      isAutofocussed={false}
      backspaceRemovesValue={true}
      isClearable={true}
      isDisabled={false}
      isReadOnly={false}
      isMulti={true}
      noOptionsMessage="No exact match found"
      loadingMessage="loading exact matches"
      placeholder="Select customers"
      // eslint-disable-next-line no-undef
      loadOptions={customLoadOptionsFunction}
      cacheOptions={false}
    />
  );
};

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.
`aria-label`	`AsyncProps['aria-label']`			Aria label (for assistive tech) Props from React select was used
`aria-labelledby`	`AsyncProps['aria-labelledby']`			HTML ID of an element that should be used as the label (for assistive tech) Props from React select was used
`aria-invalid`	`AsyncProps['aria-invalid']`			Indicate if the value entered in the input is invalid. Props from React select was used
`aria-errormessage`	`AsyncProps['aria-errormessage']`			HTML ID of an element containing an error message related to the input. Props from React select was used
`id`	`AsyncProps['inputId']`			The id of the search input. This forwarded as react-select's "inputId" Props from React select was used
`containerId`	`AsyncProps['id']`			The id to set on the SelectContainer component. This is forwarded as react-select's "id" Props from React select was used
`name`	`AsyncProps['name']`			Name of the HTML Input (optional - without this, no input will be rendered) Props from React select was used
`placeholder`	`AsyncProps['placeholder']`			Placeholder text for the select value Props from React select was used
`components`	`AsyncProps['components']`			Map of components to overwrite the default ones, see what components you can override Props from React select was used
`controlShouldRenderValue`	`AsyncProps['controlShouldRenderValue']`		`true`	Control whether the selected values should be rendered in the control Props from React select was used
`tabIndex`	`AsyncProps['tabIndex']`			Sets the tabIndex attribute on the input Props from React select was used
`value`	`AsyncProps['value']`		`null`	The value of the select; reflected by the selected option Props from React select was used
`backspaceRemovesValue`	`AsyncProps['backspaceRemovesValue']`			Remove the currently focused option when the user presses backspace Props from React select was used
`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
`isDisabled`	`boolean`			Is the select disabled
`isClearable`	`boolean`			Is the select value clearable
`isOptionDisabled`	`AsyncProps['isOptionDisabled']`			Override the built-in logic to detect whether an option is disabled Props from React select was used
`isMulti`	`AsyncProps['isMulti']`			Support multiple selected options Props from React select was used
`isAutofocussed`	`boolean`			Focus the control when it is mounted. Renamed autoFocus of react-select
`noOptionsMessage`	`AsyncProps['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
`menuIsOpen`	`AsyncProps['menuIsOpen']`			Can be used to enforce the select input to be opened Props from React select was used
`maxMenuHeight`	`AsyncProps['maxMenuHeight']`		`220`	Maximum height of the menu before scrolling Props from React select was used
`menuPortalTarget`	`AsyncProps['menuPortalTarget']`			Dom element to portal the select menu to Props from React select was used
`menuPortalZIndex`	`number`		`1`	z-index value for the menu portal Use in conjunction with `menuPortalTarget`
`menuShouldBlockScroll`	`AsyncProps['menuShouldBlockScroll']`			whether the menu should block scroll while open Props from React select was used
`closeMenuOnSelect`	`AsyncProps['closeMenuOnSelect']`			Whether the menu should close after a value is selected. Defaults to `true`. Props from React select was used
`showOptionGroupDivider`	`boolean`			Determines if option groups will be separated by a divider
`defaultOptions`	`AsyncProps['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
`onBlur`	`Function`See signature.			Handle blur events on the control
`onChange`	`Function`See signature.			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`	`AsyncProps['onFocus']`			Handle focus events on the control Props from React select was used
`onInputChange`	`AsyncProps['onInputChange']`			Handle change events on the input Props from React select was used
`tabSelectsValue`	`AsyncProps['tabSelectsValue']`			Select the currently focused option when the user presses tab Props from React select was used
`loadOptions`	`AsyncProps['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
`loadingMessage`	`union`Possible values:`string , (() => string)`			The text shown while the options are being loaded
`cacheOptions`	`AsyncProps['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
`filterOption`	`AsyncProps['filterOption']`			Custom method to filter whether an option should be displayed in the menu Props from React select was used
`optionType`	`union`Possible values:`'single-property' , 'double-property' , 'multiple-properties'`			The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info
`iconLeft`	`ReactNode`			Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled.

Signatures

Signature `onBlur`

(event: TCustomEvent) => void

Signature `onChange`

(event: TCustomEvent, info: ActionMeta<unknown>) => void

The underlying @commercetools-uikit/async-select-input is built on top of react-select v3. @commercetools-uikit/async-select-input supports mostly the same properties as react-select with some minor changes in the behaviour of some of the props. The @commercetools-uikit/search-select-input which is built on top @commercetools-uikit/async-select-input has predefined values for some the props. The props that have predefined values in @commercetools-uikit/search-select-input are as follows: