SelectableSearchInput

Description

A controlled selectable search input component for single-line strings with validation states.

Installation

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

npm --save install @commercetools-uikit/selectable-search-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 SelectableSearchInput from '@commercetools-uikit/selectable-search-input';

const value = {
  text: 'foo',
  option: 'bar',
};

const Example = () => (
  <SelectableSearchInput
    value={value}
    onChange={(event) => alert(event.target.value)}
    onSubmit={(val) => alert(val)}
    onReset={() => alert('reset')}
    options={[
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
    ]}
    selectDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}
    inputDataProps={[{ 'prop-3': 'value-1' }, { 'prop-4': 'value-2' }]}
  />
);

export default Example;

Properties

| Props | Type | Required | Default | Description | | -------------------------- | -------------------------------------------------------------------------------------- | :------: | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | id | string | | | Used as HTML id property. An id is auto-generated when it is not specified. | | autoComplete | string | | | Used as HTML autocomplete property | | aria-invalid | boolean | | | Indicate if the value entered in the input is invalid. | | aria-errormessage | string | | | HTML ID of an element containing an error message related to the input. | | name | string | | | Used as HTML name of the input component property. | | value | ObjectSee signature. | ✅ | | Value of the input. Consists of text input and selected option. | | _experimentalValue | ObjectSee signature. | | | | | onChange | FunctionSee signature. | | | Called with the event of the input or dropdown when either the selectable dropdown or the text input have changed. The change event from the text input has a suffix of .textInput and the change event from the dropdown has a suffix of .dropdown. | | onBlur | FunctionSee signature. | | | Called when input is blurred | | onFocus | FunctionSee signature. | | | Called when input is focused | | onSubmit | FunctionSee signature. | ✅ | | Handler when the search button is clicked. | | onReset | FunctionSee signature. | | | Handler when the clear button is clicked. | | isAutofocussed | boolean | | | Focus the input on initial render | | isDisabled | boolean | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | | isReadOnly | boolean | | | Indicates that the field is displaying read-only content | | hasError | boolean | | | Indicates if the input has invalid values | | hasWarning | boolean | | | Indicates if the input has warning values | | placeholder | string | | | Placeholder text for the input | | isClearable | boolean | | true | Indicates if the input should be cleared when the clear button is clicked. Defaults to true. | | isCondensed | boolean | | | Use this property to reduce the paddings of the component for a ui compact variant | | horizontalConstraint | unionPossible values:10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale' , 'auto' | | 'scale' | Horizontal size limit of the input fields. | | options | unionPossible values:TOption[] , TOptionObject[] | ✅ | | Array of options that populate the select menu | | menuPortalZIndex | number | | 1 | z-index value for the menu portal Use in conjunction with menuPortalTarget | | menuPortalTarget | ReactSelectProps['menuPortalTarget'] | | | Dom element to portal the select menu to Props from React select was used | | menuShouldBlockScroll | ReactSelectProps['menuShouldBlockScroll'] | | | whether the menu should block scroll while open Props from React select was used | | onMenuInputChange | ReactSelectProps['onInputChange'] | | | Handle change events on the menu input Props from React select was used | | noMenuOptionsMessage | ReactSelectProps['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 | | isMenuSearchable | ReactSelectProps['isSearchable'] | | | Whether to enable search functionality. Props from React select was used | | maxMenuHeight | ReactSelectProps['maxMenuHeight'] | | | Maximum height of the menu before scrolling Props from React select was used | | closeMenuOnSelect | ReactSelectProps['closeMenuOnSelect'] | | | Whether the menu should close after a value is selected. Defaults to true. Props from React select was used | | menuHorizontalConstraint | unionPossible values:3 , 4 , 5 | | 3 | Horizontal size limit for the dropdown menu. | | showSubmitButton | boolean | | true | Show submit button in the input | | selectDataProps | Record | | | used to pass data-* props to the select component. eg: selectDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]} | | inputDataProps | Record | | | used to pass data-* props to the input element. eg: inputDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]} | | selectCustomComponents | ReactSelectProps['components'] | | | Map of components to overwrite the default ones, see what components you can override Props from React select was used | | rightActionIcon | ReactElement | | | Custom action icon to be displayed on the right side of the input. | | rightActionProps | TIconButtonProps | | | Props for the right-action icon-button. Required when rightActionIcon is provided. At least a label and an onClick prop/function need to be provided. |

Signatures

Signature value

{
  text: string;
  option: string;
}

Signature _experimentalValue

{
  text: string;
  option: string;
}

Signature onChange

(event: TCustomEvent) => void

Signature onBlur

(event: TCustomEvent) => void

Signature onFocus

(event: TCustomEvent) => void

Signature onSubmit

(value: TValue) => void

Signature onReset

() => void

data-* props

The component further forwards all data- attributes to the underlying input component.

Static methods

SelectableSearchInput.isEmpty

Returns true when the value is considered empty, which is when the value is empty or consists of spaces only.

SelectableSearchInput.isEmpty({
  text: '',
  option: '',
}); // -> true
SelectableSearchInput.isEmpty({
  text: '    ',
  option: 'bar',
}); // -> true
SelectableSearchInput.isEmpty({
  text: 'foo',
  option: 'bar',
}); // -> false

Main Functions and use cases are:

• Input field for single-line strings. Used for selectable search.