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.

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

fix(Future Select): remove redundant focus management #5015

Merged
merged 5 commits into from
Sep 4, 2024

Conversation

dougmacknz
Copy link
Contributor

@dougmacknz dougmacknz commented Sep 4, 2024

Why

I was attempting to remove the page jump when the select is opened and found these focus management things that aren't needed and in some cases cause incorrect behaviour (e.g. pressing up arrow on the trigger was focusing the first item, should be the final item).

This has shown to cause no page jump in our storybook

Before:
https://github.com/user-attachments/assets/4cd87900-6ce9-4670-bdd1-385c772a7bf5

After:
https://github.com/user-attachments/assets/4796c5ac-f011-41e2-bd3d-28cdadb95e51

But when testing in one of our UIs via pnpm link, it was still jumping so I'm not confident that this has fixed that.

Either way, definitely still worth pushing this through.

What

  • The main change: remove the autoFocus in the useListBox hook causing it to always focus the first item in the list
    • This is already handled via some other react-aria stuff. It will focus the first item on enter or down arrow press, the final item on up arrow press, and it focuses the listbox itself when opened via click
    • Adjust tests to the new behaviour
  • Remove some redunant focus lock code on the Popover implementation
    • This actually wasn't doing anything because FocusLock enabled is set to false by default in the Popover
  • Fix a styling selector in ListBox.module.scss
    • The class .focus doesn't exist so this wasn't doing anything. I needed to fix this to avoid a focus ring showing when opened via click

@dougmacknz dougmacknz requested a review from a team as a code owner September 4, 2024 01:16
Copy link

changeset-bot bot commented Sep 4, 2024

🦋 Changeset detected

Latest commit: af47744

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@kaizen/components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented Sep 4, 2024

✨ Here is your branch preview! ✨

Last updated for commit af47744: Changeset

@dougmacknz dougmacknz force-pushed the KZN-2697/stop-page-jump-on-select-open branch from f5b25d7 to d2671a0 Compare September 4, 2024 02:03
@dougmacknz dougmacknz force-pushed the KZN-2697/stop-page-jump-on-select-open branch from d2671a0 to af47744 Compare September 4, 2024 03:55
@HeartSquared HeartSquared merged commit 6bb072f into main Sep 4, 2024
19 checks passed
@HeartSquared HeartSquared deleted the KZN-2697/stop-page-jump-on-select-open branch September 4, 2024 04:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants