Dropdown: Error occurred with keyboard action

[rokoroku]

Steps

For Dropdown without shorthanded options prop, we cannot move selections with keyboard arrows.

Expected Result

moves focus up & down

Actual Result

Dropdown.js?ac82:598 Uncaught TypeError: Cannot read property 'length' of undefined
    at Dropdown._this.moveSelectionBy (Dropdown.js?ac82:598)
    at HTMLDocument.Dropdown._this.moveSelectionOnKeyDown (Dropdown.js?ac82:213)
Dropdown._this.moveSelectionBy @ Dropdown.js?ac82:598
Dropdown._this.moveSelectionOnKeyDown @ Dropdown.js?ac82:213

Version

0.70.0

Testcase

https://codepen.io/rokoroku/pen/weLWXX

[levithomason]

As noted in the Dropdown docs:

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state...

We should fix the error, however, the fix will only prevent the error from being thrown. We will not attempt to parse children and update the state accordingly. In the future, we will likely drop all support for children in the Dropdown and require only the use of shorthand props.

[layershifter]

I fully agree about drop of support children. BTW, I also have an idea to split Dropdown to multiple components like SearchDropdown and MultipleDropdown. Not sure that it's the best possible idea, but it will allow to make Dropdown more simple.

[rokoroku]

I've used subcomponent API to use <Dropdown.Divider/>.
If it will be dropped, there should be shorthanded props for dropdown components such as Header, Divider, etc. (Or is there any options exists? it's not documented well.)

[levithomason]

It is in progress, see #1724 for the issue/discussion and #1757 for the PR. Related to this is supporting nested sub menus with shorthand, #1365.