[DropDownMenu] TabIndex, Close on ESC, Emitting button label #3558
Comments
|
Sounds like you have this all figured out. Please submit a PR! 👍 |
|
How does #3583 work in this context? It focusses on |
|
It doesn't but I will be sure to refer to what you did working on this PR. Thanks. |
|
@sburgess8 : Has this issue resolved for you by using the above PR suggestion? Do let us know. |
|
Thanks for your interest. #3583 does not solve the issue of dropdown menus being accessible in the tab index of a page. This issue is preventing our adoption of this component. I have not compared the DropDownMenu vs IconMenu vis a vis tabbing since the most recent major refactor. I will include it on my todo list to investigate and hopefully work on a PR in the near future. |
|
Cool. Do share your observations. Thanks! |
|
I've taken a stab at implementing this (see the change list at my fork). You can:
Before I open a PR, there's a weird bug though in the context of SelectField. When the popover closes via the keyboard, I re-focus the DropDownMenu (see here) so you maintain the tab position. The item properly gets focused for a moment, but then this causes a blur event (?) on the containing TextField, which does a setState, which for some reason causes the Can anyone provide some feedback as to why the DropDownMenu might loosing focus when TextField does a setState and what I can do about it? |
|
Is there any progress on this? Not being able to select a form component with |
First off, thanks for your hard work on this project, it's really incredible.
Keyboard behavior differs between DropDownMenu and IconMenu.
In IconMenu, we can tab to an IconMenu in the DOM. Then by hitting spacebar the menu opens and we are able to move through the indices there. Then, upon hitting ESC the menu closes and we are returned to the TabIndex of the menu icon in the page.
In DropDownMenu, we can't select the menu by tabbing through the page nor can we close the menu by hitting escape. In addition, we can't create a custom label for the DropDownMenu emitting button that is not one of the options in the menu. This common use case is shown in the Material Design spec here (second one down): https://www.google.com/design/spec/components/menus.html# . I worked around this by making the first MenuItem disabled as setting that and the default option.
I'd like to request that we make the behavior of DropDownMenu the same as IconMenu. What would be even better is if we could choose to turn off or change this behavior through the use of a prop. Since devs don't have access to open and close these menus programmatically, it would be yugely useful to provide an interface via props. It may be as simple as saying "<DropDownMenu closeOnEsc={ false } />". If not that, providing a way to programmatically open and close the menu using a ref would be useful.
DropDownMenu getting keyboard focus has been requested before here: #714 (comment)
"When tabbing through a form or page and the tab order shifts onto a Drop Down menu it should get focus"
This was said to be fixed here: #846 but does not provide that functionality.
DropDownMenu is not selectable by tabbing and can't be closed by hitting ESC. It is not a feature to be able to use a dropdown with a custom label for the menu emitting button as specified in the Material Design spec.
http://www.material-ui.com/#/components/dropdown-menu
IconMenu is selectable by tabbing and can be closed by hitting ESC: http://www.material-ui.com/#/components/icon-menu
Thank you.
The text was updated successfully, but these errors were encountered: