EuiSelect: prevent propagation on inconsistent mouseup events #1926
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.
Summary
Fixes #1881, in which inconsistent browser implementations of mouse events on
select
elements would cause/prevent unintended state updates.The egregious example is Firefox, which emits
mouseup
events only onselect
option
interaction. The propagated event would result in asetState
race condition when used withEuiOutsideClickDetector
(EuiOutsideClickDetector
must use mouse events rather than click events due to other browser inconsistencies).Proposal
The solution this PR proposes is to normalize all browsers to the "lowest" common event result: Safari, which does not emit any
mouseup
events forselect
element interaction. The result of this is consistent eventing across supported browsers, but prevents clicks onEuiSelect
from triggeringEuiOutsideClickDetector
behavior (Note, this happens in Safari regardless of this PR). I will document this in the example should we continue with this pattern.Alternative
To alleviate the Firefox-specific issue, we could stop propagation of only
mouseup
events onselect
option
interaction. This would lead to differentEuiOutsideClickDetector
outcomes in each of our supported browsers, however.Browser Reference
* Occurs even if mouse remains down
Checklist
- [ ] This was checked in mobile- [ ] This was checked in dark mode- [ ] Any props added have proper autodocs- [ ] Documentation examples were addedA changelog entry exists and is marked appropriately
This was checked for breaking changes and labeled appropriately
- [ ] Jest tests were updated or added to match the most common scenarios- [ ] This was checked against keyboard-only and screenreader scenarios- [ ] This required updates to Framer X components