[ClickAwayListener] Trigger in mouseup instead of click #29975
+57
−21
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.
ClickAwayListener
if the children took up a small amount on the screen: https://codesandbox.io/s/clickaway-material-ios-tap-highlight-3prkwFor example clicking "Click me" in https://codesandbox.io/s/clickaway-material-ios-tap-highlight-y42nf?file=/demo.js would trigger a tap highlight even though the child is not actually interactive (notice the black transparent flash):
tap-highlight-click-away.mp4
Note that this usually isn't an issue since iOS only applies the tap highlight if the element with an explicit
onclick
takes up a small portion of the screen (or parent?). As far as I can tell it's <30% (see https://trac.webkit.org/browser/webkit/trunk/Source/WebKit/UIProcess/ios/WKContentViewInteraction.mm?rev=286260#L2096. I don't actually know for sure if the linked value is responsible but looking at the code overall I'm fairly certain these are the iOS tap heuristics).Basically we apply click-away heuristics while processing
mouseup
instead ofclick
.Note that this change needs extensive manual testing and has the potential of breaking existing applications that relied on
clickaway
firing aftermouseup
events finished bubbling.Browser run: https://app.circleci.com/pipelines/github/mui-org/material-ui/57385/workflows/d26c82b1-22e6-41c7-87ec-13683dab9b0c