A controlled selectable search input component for single-line strings with validation states.
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
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;
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. | |
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. | |
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' }]} |
{
text: string;
option: string;
}
(event: TCustomEvent) => void
(event: TCustomEvent) => void
(event: TCustomEvent) => void
(value: TValue) => void
() => void
The component further forwards all data-
attributes to the underlying input
component.
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
- Input field for single-line strings. Used for selectable search.