[DropdownMenu] Maintaining focus on a text input

[ThePaulMcBride]

I'm trying to use the drop down menu where one of the items is a simple text/number input and running into issues. Not sure if this is just flat out not supported or not, but it would be very useful!

Essentially, when the input is focused, if the mouse is moved, it will lose focus.

Any ideas on how I can stop that from happening?

Here is a minimal reproduction:

https://n0fzt.csb.app/

[jjenzz]

Hi @ThePaulMcBride ,

Unfortunately this would be a misuse of the DropdownMenu pattern. The menu items have role=menuitem (so SR users can interpret them as clickable actions) and various other accessibility/functionalities applied specific to that pattern so if you try to break away from that you will likely end up with something that isn't accessible.

What type of component are you trying to create here?

[ThePaulMcBride]

Hey @jjenzz!

Here are the designs of what I'm trying to build. If this is likely to end up being inaccessible, do you have any ideas as to what I should do instead?

[jjenzz]

Is this portion opened via a button or is it always on screen? Would you mind sharing the whole screenshot 🙏

[gabrielpetersson]

For those of you who need an input bar and are confused about why input loses focus, switch out <DropdownMenu.Item> for a div (might not be accessible, but I'm building an internal tool so that's ok)