Downshift: [useMenuButton] Create hooks for menu and menu button

Created on 7 Jul 2020  路  1Comment  路  Source: downshift-js/downshift

Hi there, thanks for your great work on Downshift!

We're currently using the useCombobox hook and will definitely be using useSelect for our custom select components.

I'm currently tasked with implementing an accessible menu button component for our product and was thinking about whether Downshift could be used for this purpose, too. There seems to be quite a bit of overlap between the ARIA design patterns of select/listbox and menu/menu button, so useSelect may be workable. Do you have any examples of this being done, or any advice on whether you think this is a good or bad idea? Do you maybe already have plans for a useMenuButton hook?

If I went with useSelect, I'd expect it to be necessary to override some of its defaults, for example the role of the menu will have to be menu, not listbox. But otherwise the functionality seems reasonably similar. Any pointers?

enhancement needs discussion

Most helpful comment

First of all I have to say that I would be super happy to have useMenuButton as a hook endorsed and provided by Downshift.

There is a similarity between the select and menu button but there are also a lot of different things, like having sub-menus and focus management in those menus.

I am not going to lie, it may take a while to develop it, but it would be super awesome! I will leave this issue open as a feature request, and we can start discussing specs and how we can use Downshift's principles in building it (stateReducer, control props, on change props etc).

>All comments

First of all I have to say that I would be super happy to have useMenuButton as a hook endorsed and provided by Downshift.

There is a similarity between the select and menu button but there are also a lot of different things, like having sub-menus and focus management in those menus.

I am not going to lie, it may take a while to develop it, but it would be super awesome! I will leave this issue open as a feature request, and we can start discussing specs and how we can use Downshift's principles in building it (stateReducer, control props, on change props etc).

Was this page helpful?
0 / 5 - 0 ratings