TODO from my side:

1. Create better styles by defining and using more variables rather than hardcoding styles:

https://github.com/stardust-ui/react/pull/422/files#diff-bf3c97918f9b89d2eda22d1f160ba5c2R1

2. Address remaining issues:

I apologize for the late review but I think there are quite a few of issues that need addressing. Please take a look at the comments and the following bugs I found from manual testing:

1. filtering does not work in the examples

I think we should implement some default filtering method for the dropdown items. TBD if this PR or next one, but please create an issue with follow-up items if we choose to go with the latter.

2. dropdown without search prop provided collapses the input if no option selected

3. clicking on ^ button does not close the dropdown

4. hovering on the dropdown list items changes the currently selected item for keyboard navigation

5. dropdown options need a border

6. scrollbar is translucent

7. weird small curly borders on the input

Let me provide set of additional problems that were discovered.

Tab results in item being moved to dropdown's selected area

When TAB is pressed while focus is on the item from the dropdown list, the item becomes selected.Expected behavior, however, is that focus will just be passed to the next focusable item, without any item being added to the selected list.

This is, actually, one of the reasons why it is impossible to TAB to toggle button.

DropdownLabel component's name is confusing

Essentially, this is the name of Component that is used to display selected items. DropdownSelectedItem name would work better for that, as it will correctly deliver component's semantics

DropdownLabel - misleading onClick event handler name

There is an event handler in the DropdownLabel's API that is called onClick - while, essentially, it is called on label's icon click and, what is crucially important, is passing icon's props (not the props of DropdownLabel) as argument to the handler. To properly convey its behavior semantics, this prop should be rather named as onIconClick - with that client will expect to have icon's props in a handler.

Imperative DOM manipulation code instead of Portal component

Dropdown's setA11yState method's logic consists of imperative DOM manipulation - this should be replaced with declarative component-based approach, and we already have Portal component to achieve the same goals.

innerRef prop of DropdownSearchInput

This prop is named as ref, but is only able to properly handle ref callbacks (and not ref objects in addition). This is a huge source of potential client problems.

Shorthand value is treated as object

For the following props it is a shorthand value expected to be passed:

• getA11ySelectionMessage
• itemToString
• items

The problem is that all of them expect shorthand value to be an object - and, thus, unable to properly handle React.Elements being passed, so that the following innocent action from client will break the logic:

<Dropdown items={[
   <span>My item</span>
  <span>Another item</span>
]}>

To be added: clearable prop that will create 'X' icon (in place of the dropdown) and will clear the selected value(s) in the dropdown.
Will need to identify use cases. Like how to handle both clearable and toggle. And maybe other cases as well.

To be refactored: trigger button. Needs to support shorthand value in order for it to be customisable.

"Tab results in item being moved to dropdown's selected area" from @kuzhelov 's comment is intentional. This should not be changed.

When !search && !multiple, dropdown is closed and there is already a value selected, Down/Up should focus value +/- 1 instead of 0 / size - 1. (intention is to fix from Downshift)
When letter key is pressed and dropdown is open, should focus on items starting with that key.
When Home/End key is pressed, first/last option should be highlighted.
Left and Right should go through the already selected options, in multiple selection mode.

Dropdown does not have focus style added when toggle button is focused. Need to fix this case.

Additional requirements - we will turn them into issues when defined:

1. Expose DropdownLabel onHover
2. Loader
3. List max height

1. Strange naming for toggleButton

• it's not button at all
• it can be indicator (used in react-select or any other name)

2. toggleButton is not shorthand

There is no way to apply props to it 😿

3. toogleButton is not visible by default

It should be visible by default because this is a common behavior. Even when is multiple.

SUIR

https://react.semantic-ui.com/modules/dropdown/

react-select

https://react-select.com/home

Material UI

https://material-ui.com/demos/selects/

Vuetify

https://vuetifyjs.com/ru/components/combobox

@jurokapsiar @silviuavram

Additional requirements - we will turn them into issues when defined:

List max height

For the list max height to work properly we need to implement scrolling (see GIF below)

The problem is that in order to achieve that, we need to restructure the DOM for Dropdown component and put the result list and combobox input in a separate DOM element. However, this implies breaking accessibility as the combobox input and list of options need to be siblings in the DOM (ARIA standards - @silviuavram can provide more input here).

Feel free to create a dedicated issue for that to track this work and prioritize.

FYI @alinais @priyankar205