fix(dropdowns): forwards menu button ref correctly #1919
Merged
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
This PR addresses a small bug with menu button ref handling, in addition to improving ref handling between
buttonProps
andbutton
in aMenu
.Detail
The main fix is reversing Menu's
ref
(fromforwardRef
) from merging withtriggerRef
when composing button props. Instead, theref
frombuttonProps
is merged.Now a consumer could achieve something like this:
... and the ref would be maintained. Compared to what a consumer would need to do to manage a ref today:
I see the con here is worth considering, where a consumer must define a custom button any time they interact with the ref.
While a fix for handling modal focus with menus is under way, this change is meant to simplify the API a bit in general.
Checklist
👌 design updates will be Garden Designer approved (add the designer as a reviewer)🌐 demo is up-to-date (npm start
)⬅️ renders as expected with reversed (RTL) direction⚫ renders as expected in dark mode🤘 renders as expected with Bedrock CSS (?bedrock
)💂♂️ includes new unit tests. Maintain existing coverage (always >= 96%)♿ tested for WCAG 2.1 AA accessibility compliance📝 tested in Chrome, Firefox, Safari, and Edge