Fixes dropdown flash caused by selection on mouseup after content shifts under cursor
To reproduce the original error:
Go to the Storybook docs page for Dropdown where each story is in a short iframe. That iframe restricts the height of the window to be shorter than the dropdown menu.
Open the first dropdown and select the last item.
Now if you hold down your click on the dropdown button to open the dropdown menu and then let go after the menu has opened and the page shifted under you so that what's under the cursor isn't the dropdown button anymore but one of the options, it will select that option and close the menu.
This is what I believe to be the "flash" that people are seeing. It's shifting the content out from under your cursor and then making a selection when you let go of the click. This also happens with short clicks, but it's easier to reproduce consistently with a longer click.
Digging around in the bowels of react-aria, I found a handy—albeit deprecated—prop for making it so selection doesn't occur on "press up". There's even another internal check named allowsDifferentPressOrigin that suggests they understand this can be a problem in some cases. Yay for tons of layers of abstraction that beget all sorts of weird config options 🎉
How to test
Follow the reproduction steps above. We should also talk to the team who reported this and see if we can test it in that app, since that scenario is a little different than the one they used to reproduce it in our Storybook.
Checklist
[x] Prefixed the PR title with the Jira ticket number as [WNMGDS-####] Title or [NO-TICKET] if this is unticketed work.
[x] Selected appropriate Type (only one) label for this PR, if it is a breaking change, label should only be Type: Breaking
[x] Selected appropriate Impacts, multiple can be selected.
Summary
WNMGDS-2809
Fixes dropdown flash caused by selection on mouseup after content shifts under cursor
To reproduce the original error:
This is what I believe to be the "flash" that people are seeing. It's shifting the content out from under your cursor and then making a selection when you let go of the click. This also happens with short clicks, but it's easier to reproduce consistently with a longer click.
Digging around in the bowels of
react-aria, I found a handy—albeit deprecated—prop for making it so selection doesn't occur on "press up". There's even another internal check named allowsDifferentPressOrigin that suggests they understand this can be a problem in some cases. Yay for tons of layers of abstraction that beget all sorts of weird config options 🎉How to test
Follow the reproduction steps above. We should also talk to the team who reported this and see if we can test it in that app, since that scenario is a little different than the one they used to reproduce it in our Storybook.
Checklist
[WNMGDS-####] Titleor [NO-TICKET] if this is unticketed work.Type(only one) label for this PR, if it is a breaking change, label should only beType: BreakingImpacts, multiple can be selected.