toddler.multiselect

Option

Default option element

Options

Component will use options from dropdown context to render data from context using :render prop.

ignore-select will stop propagation of mouse-down event. Should be true if you don’t want popup to close, or false if you wan’t to close popup on multiselect option select.

use-multiselect

(use-multiselect {:keys [value options on-change onChange new-fn search-fn context-fn area area-position read-only], :or {search-fn str, context-fn (constantly nil)}, :as props})

Abstracts dropdown mechanincs. Expects options prop that holds available options for dropdown, value and on-change callback that will be called with actual value of selected option.

Optional:

  • search-fn - will be applied to options to display string representation
  • new-fn - when provided will be called when search-fn doesn’t match any of available options

Hook will return map with following state and handler keys:

  • search - value that should be displayed in input
  • value - actual value
  • opened - true|false if dropdown is opened
  • options - dropdown options
  • focus - when called will focus option
  • cursor - position of selected value
  • input - reference that you should add to input element
  • area - reference that you should add to dropdown element
  • search-fn - function that will be used to compute how to display options. Should return string
  • read-only true|false
  • discard! - when called will reset dropdown
  • toggle! - open|closes dropdown
  • open! - opens dropdown
  • close! - closes dropdown
  • select! - will call on change for value
  • popup - reference that should be passed to popup element
  • on-change - Should be passed to input element
  • on-key-down - Should be passed to input element