@commercetools-uikit/selectable-search-input
v19.13.0
Published
A controlled selectable search input component for single-line strings with validation states.
Downloads
13,367
Readme
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
| Object
See signature. | ✅ | | Value of the input. Consists of text input and selected option. |
| _experimentalValue
| Object
See signature. | | | |
| onChange
| Function
See 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
| Function
See signature. | | | Called when input is blurred |
| onFocus
| Function
See signature. | | | Called when input is focused |
| onSubmit
| Function
See signature. | ✅ | | Handler when the search button is clicked. |
| onReset
| Function
See 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
| union
Possible values:10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale' , 'auto'
| | 'scale'
| Horizontal size limit of the input fields. |
| options
| union
Possible 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
| union
Possible 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.