Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Ensure focus trap, Tabs and Dialog play well together #1231

Merged
merged 6 commits into from
Mar 10, 2022
Merged

Ensure focus trap, Tabs and Dialog play well together #1231

merged 6 commits into from
Mar 10, 2022

Commits on Mar 10, 2022

  1. add internal FocusSentinel component 

    This component will allow you to catch the focus and forward it to a new
element. The catch is that it will retry to do that because sometimes
components won't be available yet.

E.g.: We want to focus the first Tab component if it is rendered inside
the Dialog. However, a Tab will register itself in the next tick,
triggering a re-render and only then will it be `selected`. This is a
bit too late for the FocusTrap component.

The FocusSentinel should fix this by catching the focus, and forwarding
it to the correct component. Once that is done, it will remove itself
from the DOM tree so that you can't ever focus that element anymore.
This should fix potential `<tab>` and `<shift+tab>` behaviour.
    @RobinMalfait
    RobinMalfait committed Mar 10, 2022
    Configuration menu
    Copy the full SHA
    bd3019c View commit details
    Browse the repository at this point in the history

  2. find the selectedIndex asap

    @RobinMalfait
    RobinMalfait committed Mar 10, 2022
    Configuration menu
    Copy the full SHA
    711ec66 View commit details
    Browse the repository at this point in the history

  3. use the FocusSentinel and forward it to the correct Tab

    @RobinMalfait
    RobinMalfait committed Mar 10, 2022
    Configuration menu
    Copy the full SHA
    07e930d View commit details
    Browse the repository at this point in the history

  4. add example Tab in Dialog example

    @RobinMalfait
    RobinMalfait committed Mar 10, 2022
    Configuration menu
    Copy the full SHA
    5d1f42d View commit details
    Browse the repository at this point in the history

  5. suppress console warnings 

    Because we are firing `setState` calls within the component, React is
yelling at us for not using `act(() => { ... })`. Welp, not going to add
those calls inside the component just for tests...
    @RobinMalfait
    RobinMalfait committed Mar 10, 2022
    Configuration menu
    Copy the full SHA
    1fc5b08 View commit details
    Browse the repository at this point in the history

  6. update changelog

    @RobinMalfait
    RobinMalfait committed Mar 10, 2022
    Configuration menu
    Copy the full SHA
    1cb1d0a View commit details
    Browse the repository at this point in the history