Combobox

[Willienn]

Combobox

A combobox (Combobox) combines a text field and a dropdown giving people a way to select an option from a list or enter their own choice.

Tasks:

• [x] Combobox
  • [x] root
  • [x] input
  • [x] listbox
  • [x] expandIcon
  • [x] clearIcon
  • [x] onOptionSelect
  • [x] as: "input"
  • [x] defaultSelectedOptions: For an uncontrolled component, sets the initial selection. If this is set, the defaultValue prop MUST also be set.
  • [x] multiselect: Sets the selection type to multiselect.
  • [x] multiselectWithTags: display multiselect values in custom tags. Set this to true for multiselect, even if fully controlling selection state. This enables styles and accessibility properties to be set.
  • [x] selectedOptions: An array of selected option keys. Use this with onOptionSelect to directly control the selected option(s) If this is set, the value prop MUST also be controlled.
  • [x] mountNode: Where the portal children are mounted on DOM
  • [x] appearance: Controls the colors and borders of the combobox trigger.
  • [x] clearable: If set, the combobox will show an icon to clear the current value.
  • [x] defaultOpen: The default open state when open is uncontrolled - [ ] inlinePopup: Render the combobox's popup inline in the DOM. This has accessibility benefits, particularly for touch screen readers.
  • [x] onOpenChange: Callback when the open/closed state of the dropdown changes
  • [x] open: Sets the open/closed state of the dropdown. Use together with onOpenChange to fully control the dropdown's visibility
  • [x] positioning: Configure the positioning of the combobox dropdown
  • [x] size: Controls the size of the combobox faceplate
  • [ ] freeform: boolean
• [x] Options
  • [x] checkIcon
  • [x] value
  • [x] as: "div"
  • [x] disabled: Sets an option to the disabled state. Disabled options cannot be selected, but are still keyboard navigable
  • [x] text: An optional override the string value of the Option's display text, defaulting to the Option's child content. This is used as the Dropdown button's or Combobox input's value when the option is selected, and as the comparison for type-to-find keyboard functionality. The string value of the Option's display text when the Option's children are not a string. This is used as the Dropdown button's or Combobox input's value when the option is selected, and as the comparison for type-to-find keyboard functionality.
• [x] ListBox
  • [x] onOptionSelect
  • [x] as: "div"
  • [x] defaultSelectedOptions: For an uncontrolled component, sets the initial selection. If this is set, the defaultValue prop MUST also be set.
  • [x] multiselect: Sets the selection type to multiselect. Set this to true for multiselect, even if fully controlling selection state. This enables styles and accessibility properties to be set.
  • [x] selectedOptions: An array of selected option keys. Use this with onOptionSelect to directly control the selected option(s) If this is set, the value prop MUST also be controlled.
• [x] behavior: follow behavior specified here.

[Willienn]

The inlinePopup will demand too much time as need to be done from ground up. For the freeform prop will need more search about what the Microsoft mean by "freeform"