DropDownSelect

Props

Name	Type	Description
autoComplete	string	Browser autofill, off is the default value. Works as HTML autoComplete attribute
boundingContainerRef	React.RefObject<HTMLElement \| { wrapper: HTMLElement \| null }>	...
compareObjectsBy	T extends object ? ((suggestionListItem: T) => any) \| string : never	...
data	T[]	Data for the dropdown list. If data is an array of objects, use textField to specify which object's field should be used as text for the dropdown items
defaultValue	Value	...
filterRule	'smart' \| 'startsWith' \| 'includes'	Search mode, smart is default, looks for one or several words regardless of their order, can be slow if data has thousands of elements or more
filterValue	string	...
groupBy	(option: T) => string \| undefined	...
hasClearButton	boolean	Whether or not to show a clear button inside the input element. Default is false
isDisabled	boolean	Disable the component
isLoading	boolean	Display a loading icon inside the dropdown
isOpen	boolean	Control the dropdown state
noSuggestionsText	React.ReactNode	Text shown if nothing is found among suggestions
onBlur	(event: BlurEvent) => void	Blur handler
onChange	(event: ChangeEvent<T>) => void	Value change handler
onFilterChange	(event: ChangeEvent<T>) => void	Filter input field change handler
onFocus	(event: FocusEvent) => void	Focus handler
placeholder	string	Placeholder
searchFields	string[]	You can use any of the data object's fields for seraching
shouldAllowEmpty	boolean	...
shouldFilterValues	boolean	Allows typing text to filter suggestions
shouldRender	boolean	Pass `false` if you don't want the component to appear
sortSuggestions	(a: T, b: T) => number	Sort dropdown items
textField	T extends object ? string : never	It is mandatory if data is an array of objects, textField specifies which object's field is used to get dropdown item text value. No effect if data is an array of strings
value	string \| null	Component value
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.


<>
  <DropDownSelect
    data={['Argentina', 'Spain']}
    onChange={({ component }) => console.log(component.value)}
    _w-48
  />
  <br/>
  <DropDownSelect
    data={[{ country: 'Argentina' }, { country: 'Spain' }]}
    textField='country'
    onChange={({ component }) => console.log(component.value, component.suggestion)}
    onBlur={({ component, currentTarget }) => console.log(component, currentTarget)}
    onFocus={({ component, currentTarget }) => console.log(component, currentTarget)}
    _w-48
  />
</>

Validation components' props

Name	Type	Description
form	string	Form name
name	string	Component name
isRequired	boolean	If you don't want the field to be empty
isValid	boolean	Controlled valid state
invalidMessage	ReactNode	Text to show when the value does not match requirements
requiredMessage	ReactNode	Text to show when the field is not filled
shouldValidateUnmounted	boolean	The field can still affect form submission even if it is not rendered
validator	Validator \| PredefinedValidator \| RegExp \| ValidatorObject[]
	interface Validator { (value: any): boolean, }	A validator is a function that takes a value and returns true or false depending on the logic it contains E.g. `(value) => value.length > 4`
	type PredefinedValidator = \| 'creditCardNumber' \| 'email' \| 'url'	See predefined validators
	interface ValidatorObject { validator: PredefinedValidator \| RegExp \| Validator, invalidMessage?: string, }	`ValidatorObject` is useful wnen you need to validate a value against several validators and show inividual messages for each. Just use an array of validator objects. E.g. [ { validator: (value) => value.length > 4, invalidMessage: 'More than 4 sympols please' }, { validator: /^\w+$/, invalidMessage: 'Only a-z, A-Z, 0-9 and _ are allowed' } ]

<>
<L.DropDownSelect
  data={['Argentina', 'Spain']}
  onChange={({ component }) => console.log(component.value)}
  form='dds_form'
  name='dds'
  isRequired
  _w-48
/>
<br />
<L.Button
  form='dds_form'
  onClick={({ form }) => console.log(form)}
>
  Click me
</Button>
</>

Customization props

Name	Type
iconRender inputRender invalidMessageRender itemRender listRender noSuggestionsRender	({ Element, elementprops, componentProps, componentState }): React.ReactNode	Customization


<L.DropDownSelect
  data={['English', 'Spanish']}
  defaultValue="English"
  onChange={({ component }) => console.log(component.value)}
  iconRender={({ elementProps }) => {
    return (
      <TranslateIcon
        {...elementProps}
      />
    )
  }}
  theme={{
    selectIconOpened: '',  // disable icon movement
  }}
  _w-48
/>