Form Inputs inside Menu Items?

[qwerty2k]

is it possible to have form inputs inside a menu item? When ive tried clicking on the form input immediately closes the menu.

Here is a quick thing i threw together with a submenu and an input where you can see this behavior:

https://stackblitz.com/edit/vitejs-vite-svgg8b?file=src%2FApp.tsx

I was hoping to use the menu and submenus to put together a component that would allow users to filter a grid with each item in the first menu the column name and then a submenu for that column where they can type in an input or use checkboxes to update the grid filter.

If anyone has any good ideas or knows of any libraries that are good for this use let me know :),

Thanks,
Scott

[LFDanLu]

I don't believe menu items allow interactive elements due to accessibility issues, see #6088 (comment) for some more relevant information about that. As for the experience you are trying to create, it sounds like each column could have an independent filter applied to it? If yes, then does the information need to be in a grid since information in the row wouldn't always exist in the same row due to the filters applied simultaneously to multiple columns? And then the filter applied is a text filter or some preset filters that could be applied (would one filter be applied at a time or a combination?)

IMO it feels a bit complicated to have all of that filter functionality contained within a single menu, would a side rail experience be easier here? If you have a mock of the experience you are envisioning that would be helpful.

[qwerty2k]

Thats fair enough, appreciate your response, the design isn't mine but was down to me to implement, i will suggest filters at the table row header level instead.