MultiSelectorInput

Properties

• id (string):
  Unique identifier for the component.
• name (string):
  Name for the input field used in forms.
• class (string):
  Additional CSS classes for the component.
• classList (JSX.HTMLAttributes<HTMLDivElement>['classList']):
  Additional CSS classes as an object that supports dynamic class assignment.
• style (JSX.CSSProperties):
  Inline styles for the component.
• formId (string):
  Identifier of the form to which the component is bound.
• placeholder (string):
  Placeholder text displayed when no items are selected.
• clearable (boolean):
  Determines whether selected values can be cleared. If true, a clear icon is displayed.
• wrappable (boolean):
  Determines whether lines in the value list can wrap. This is useful for long lists that may take up multiple lines.
• disabled (boolean):
  Disables the component, making it unavailable for interaction.
• forceLoading (boolean):
  Forces the loading mode on, displaying a loading indicator.
• store ([get: any, set: (field: string, value: (string | number)[]) => void]):
  Optional store for managing selection state. Supports management through an array of identifiers.
• items (SelectorItem[]):
  Local array of selectable items.
• itemsUrl (string):
  URL for loading items from a remote server. Supports dynamic data loading as filtering occurs.
• value (SelectorItem[] | SelectorItem['id'][]):
  Current selection value. Can be an array of item objects or an array of their identifiers.
• valueUrl (string):
  URL for fetching data by identifier if value is passed as an array of identifiers.
• itemComponent (string):
  Component for rendering each item in the dropdown list.
• valueComponent (string):
  Component for rendering selected values.
• onSelect (function(items: SelectorItem[])):
  Handler function called when one or more items are selected. Returns an array of selected items.
• onInput (function(items: SelectorItem['id'][])):
  Handler function called when selected values change. Returns an array of selected item identifiers.
• onKeyDown (function(event: KeyboardEvent)):
  Handler function for key press events when focused on the element.

Important Points

• Dropdown:
  The component supports displaying a dropdown list with items that appears when clicking on the field or typing text for filtering.
• Debounce:
  Used to optimize data filtering, triggering only after a specified time (700 ms) following the last input.
• Spinner:
  A loading indicator is displayed when data is being loaded or when the forceLoading flag is enabled.
• Filtering Items:
  The component supports both local and remote filtering through the filterItems method.