fix: Close language selector dropdown on selection or outside click#3528
Conversation
Close the language selector menu when a language option is selected or the user clicks outside the selector. Add coverage for display language labels and closing behavior. closes: #3170
brandonlenz
left a comment
brandonlenz
left a comment
There was a problem hiding this comment.
This looks good to me! A couple of minor things I'd normally recommend for this PR, but since I found enough (unrelated) stuff to build out #3534, I think this is good to go!
We can merge #3534 into this PR before merging this to main, or merge it directly to main after. Your call, I'd love eyes/gut check on that PR though either way, if you have a chance.
| document.addEventListener('click', closeOnOutsideClick) | ||
|
|
||
| return () => { | ||
| document.removeEventListener('click', closeOnOutsideClick) |
There was a problem hiding this comment.
We probably want to add { capture: true } for these.
Done in #3534
| <LanguageSelector langs={localLanguagesButton} label="Languages" /> | ||
| ) | ||
|
|
||
| fireEvent.click(getByTestId('languageSelectorButton')) |
There was a problem hiding this comment.
I think its worth swapping the test over to userEvent.
Done in #3534
|
Merging this as-is, expecting to merge #3534 as a follow-up |
|
@all-contributors please add @abbyoung for code, bug, maintenance |
|
I've put up a pull request to add @abbyoung! 🎉 |
2 participants
Summary
❗Note to reviewers: Code in this PR was written using Codex.
Fixes a bug in the language selector dropdown menu that's used when more than two languages are present.
Related Issues or PRs
Closes #3170
How To Test
yarn storybookMoreThanTwoLanguagesAsALinkand confirm behaviorLanguagelink > click outside the menu. It should close.Languagelink > click a language. You will be redirected (existing behavior).Languagelink again > click a language > Confirm the menu closes as expected.MoreThan Two LanguagesAsAButtonand confirm behaviorLanguagelink > click outside the menu. It should close.Languagelink > click a language > menu should close.Custom Classand confirm behavior.Languagelink > click outside the menu. It should close.Languagelink > click a language > menu should close.Screenshots (optional)
Author & Maintainer checklist