fix(dropdown): close dropdown when item is selected #392
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Close the dropdown menu whenever an instance of DropdownItem is clicked. fix #349
… callback Add comment to the method that attaches clsoeDropdown callback
Adds a tests to check that the dropdown is closed whenever an item is clicked. fix #349
…ng an additional prop Remove the additional closeDropdown props from DropdownItem, extend onClick props instead. fix #349
Fix prettier build error for Dropdown.spec.ts
Updates the Dropdown attachCloseListener comment to better reflect the changes
|
Hey, I would appreciate a little bit of help here. I'm not sure why the test is failing when it passes when tested locally. The weird part is, the tests pass too when I create a PR to the main branch of my fork. |
Well, it is also passing locally for me. Maybe some configuration/restriction to the CI? But... I don't actually see any big difference from other tests. 🤔 |
|
Ugh, I don't really want to spam this with commits. Let me try following React's warning about using |
Wrap dropdown's mouse interaction tests for item click with act
rluders
approved these changes
Oct 19, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Closes the dropdown floating menu whenever a DropdownItem is clicked.
Inside
Dropdown/index.tsx, a mapping function is executed that extends theonClickprops of all instances of DropdownItem. The extended lines trigger a local state change tocloseRequestKeythat is passed to theFloating/index.tsxcomponent.setOpen(false)is called inside the Floating component whenever the closeRequestKey is changed to a unique string generated by the UUID helper function.This emulates the Dropdown component requesting Floating to close itself. This is the only workaround that I can think of due to how the component is designed. Floating is contained with Dropdown, preventing other ways of passing control of the
openstate to Dropdown and its child.We can move this entirely in
Floating/index.tsxto perform the mapping but since it is reused on other components, I opted to isolate most changes on the Dropdown components themselves.Fixes #349
Type of change
Please delete options that are not relevant.
How Has This Been Tested?
Checklist: