Menu 'keepMounted' prevents tabbing in form

[elirandpg]

What package has an issue

@mantine/core

Describe the bug

When having a Menu with the keepMounted attribute (for SEO purposes) on the same page with a form element, tabbing between form elements becomes non-responsive. Remove the keepMounted property, and tabbing goes back to normal.

What version of @mantine/hooks page do you have in package.json?

6.0.16

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/p/sandbox/cool-dan-kjddq6?file=%2Fsrc%2FApp.tsx%3A17%2C26

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

No response

[elirandpg]

Is there anybody out there? 🎶

[rtivital]

I've received your issue and examined your issue, it is in the common backlog queue. If you would rather not wait for the fix, you are welcome to submit a PR with a fix.

[elirandpg]

Thank you, was really just looking for confirmation that it's in the pipeline on some level.

[rtivital]

Fixed in 7.3.1

[verdansk]

Unfortunately this issue is not resolved in v7.3.1 or later. When <Menu /> has the keepMounted-prop set, tabbing through the form, or tabbing in general becomes unresponsive.

I've updated the sandbox to the latest version, and migrated from 6 to 7.
https://codesandbox.io/p/devbox/eloquent-feynman-9rw9cw

Update
When you set the props trapFocus and withinPortal on the menu item this issue is resolved. Apologies for the confusion.

     <Menu
     keepMounted
     trapFocus={false}
     withinPortal={false}
     ....
     />