New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FocusTrap] sentinelStart & sentinelEnd create an awkward experience #33380
Comments
Thanks for the issue. It is very well described and even provide potential solutions, it is something we rarely see :) I would vote for updating the |
Sure @mnajdova ! Here's a reproduction: https://stackblitz.com/edit/react-ts-zvg3p8?file=App.tsx And because I'm having trouble actually getting that link to run in an incognito tab, here's the contentInitialize a new React + TS repo in StackBlitz, add /** @jsxFrag React.Fragment */
import { TrapFocus } from '@mui/base';
import * as React from 'react';
import './style.css';
export default function App() {
const [menuOpen, setMenuOpen] = React.useState(false);
return (
<>
<button>Some button before the menu</button>
<TrapFocus open={menuOpen}>
<div>
<button onClick={() => setMenuOpen((open) => !open)}>
I open the menu!
</button>
{menuOpen && (
<>
<button>Enclosed menu item</button>
</>
)}
</div>
</TrapFocus>
<button>Some button after the menu</button>
</>
);
}; |
Thanks, I also tried moving the trigger button outside of the |
Completed with PR #33543 |
@EthanStandel If you could work on a follow-up for #33543 (review) it would be awesome 🙏 |
@oliviertassinari I could try to carve out some time to make that happen Follow-up PR: #34008 |
Duplicates
Latest version
Current behavior 😯
When
<TrapFocus open={false} />
, there are two elements named internally assentinelStart
&sentinelEnd
. I think I have a relatively good understanding of their purpose, however, they create an incredibly awkward experience for users whenopen={false}
because it creates two invisible, tabbable elements that the user will arbitrarily tab through, creating and awkward experience for keyboard-bound users, which is the exact opposite of the inention of this utility.Expected behavior 🤔
Only render
sentinalStart
&sentinelEnd
whenopen={true}
, or, maybe more safely, have them betabIndex={open ? 0 : undefined}
Steps to reproduce 🕹
Steps:
TrapFocus
in a context where theTrapFocus
is activated or deactivated based on theiropen
prop and not based on it's own existance.Context 🔦
In my context, I want to have a
TrapFocus
around my menu icon-button and defaultopen
tofalse
. When I click the icon-button, I setopen
totrue
and render the menu also inside theTrapFocus
element. At that point everything works as it should. However, up until the trap activates, I just have these arbitrary focusable nodes wrapping one of the first elements in my document that leads to an awkward user experience.I could render a different copy of the menu icon-button with the menu alongside it when my menu is supposed to be open, but I'm using hamburgers as my menu icon and rendering a new copy would break the transition in progress.
Your environment 🌎
npx @mui/envinfo
The text was updated successfully, but these errors were encountered: