SelectDropDown

@alias SelectableOptions

TODO PRIORITY

• USE SELECTIONSTATE!

tickets

• SKREACT-1581

Learn More

• clever dropdown arrow icon
• csstricks - dropdown default styling
• mozilla - optgroup element
• material design - selection menu pattern
• material ui (not official) - dropdown component

TODO

• add "persistant active option" - example: Color always has color...
• add select dropdown preset, so we have styled & unstyled (often no border)
• add option to show initial value in the list, or not - very common
• Context
• finish
• fix
• example with radiogroup
• renderProps
• clickBoundary with proper refs

// @todo FOR CLICK BOUNDARY
const setRef = x => this.innerRef = x
const render = boundary => (
  <Wrap className={classList.wrap} innerRef={setRef}>
    <Select {...passthroughProps} {...selectAttributes.state} {...this.attributes} />
    {errorMessageView}
  </Wrap>
)
// <ClickBoundary parentRef={this.dom} onClickOutside={this.state.handleToggleVisibility}>


/**
 * @todo from clickContainer
 */
// <SelectWrap innerRef={this.setRef}>
setRef = node => {
  if (isFunction(this.props.innerRef) === true) {
    this.props.innerRef(node)
  } else if (isFunction(this.props.onBlur) === true) {
    // handleClickBoundary(node, this.props.onBlur)
  }
}

ARIA/wcag

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role
• https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html