Move mouse event disabling on interactive elements to SimpleEventPlugin. Related perf tweak to click handlers. #7642

nhunzaker · 2016-09-02T14:36:41Z

Eliminates DisabledInputUtils in favor of filtering out mouse events for disabled interactive elements in SimpleEventPlugin.

I've published the build of this branch, with a test page here: http://natehunzaker.com/disabled-react-inputs/

Drawback (and a question):

ReactTestUtils.Simulate now allows disabled inputs to receive mouse events. This made it necessary to use ReactTestUtils.SimulateNative when I updated the tests. I'm not sure what to do about this. It's as if React.TestUtils.Simulate is bypassing SimpleEventPlugin. Is this expected?

Click bubbling performance tweak:

I noticed that there's a fix for click event bubbling in iOS. iOS doesn't allow click bubbling for non-interactive elements, so a workaround is made by adding a local listener (explained here).

But now there's a check for interactive elements! So this fix can be filtered down to non-interactive elements, significantly reducing listener attachments.

I've summarized this, and included Chrome JS Profiler snapshots here.

More background:

A while back I submitted a fix for disabled inputs in IE (#6215). At the time, I believed that the fix could happen closer to the event system, but lacked familiarity with it.
#7616 yielded a video deep dive on the event system, which was super helpful in understanding this part of React. Thanks kentcdodds, gaearon, and spicyj (not @mentioned for noise)!

aweary · 2016-09-02T15:18:59Z

src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js

@@ -634,7 +656,7 @@ var SimpleEventPlugin = {
  },

  willDeleteListener: function(inst, registrationName) {
-    if (registrationName === 'onClick') {
+    if (registrationName === 'onClick' && isInteractive(inst._tag)) {


Isn't this the opposite of what we want? i.e., we want to add the empty click handler to elements that aren't considered interactive?

Oof... Yes. Looks like there's also no test coverage here. I'll add that as well.

Done. I inverted the check and added test cases.

I don't understand what this change is for. Can you explain?

I had it reversed (sorry). It now reads:

if (registrationName === 'onClick' && !isInteractive(inst._tag)) {

Inverting the isInteractive check.

Basically, iOS safari only exhibits the event bubbling issue for
non-interactive elements (like divs). Extra event handlers can be
eliminated by only attaching this event listener on those non-interactive
elements. Since the check was already created for the mouse events filter,
I went ahead and added it here.

This trades an event listener attachment for function invocation (that'll
probably get inlined), when I ran the numbers it seemed much faster
https://gist.github.com/nhunzaker/020335ee8ec0f1d487f97c7ddcfbd4a2.

aweary · 2016-09-02T15:26:23Z

I like the idea of removing a level of indirection here, but if it breaks ReactTestUtils.Simulate then we'd need to address that somehow.

aweary · 2016-09-02T15:43:04Z

cc @spicyj

nhunzaker · 2016-09-02T19:55:12Z

@aweary Did a bit more research. I modified the ReactTestUtils.Simulate.* such that it uses the event hub. With the exception of change events, it works!

Checkout: nhunzaker/react@nh-disabled-mouse-extraction...nhunzaker:nh-disabled-mouse-extraction-simulation

As for change events...

The trouble is that, when EventHubPlugin calls out to ChangeEventPlugin, it absorbs the onChange event because inputValueTracking.js deems the value has not changed. I'm observing it in the following test (and others that are similar):

// ReactDOMInput-test.js:248
it('should properly control a value of number `0`', function() {
  var stub = <input type="text" value={0} onChange={emptyFunction} />;
  stub = ReactTestUtils.renderIntoDocument(stub);
  var node = ReactDOM.findDOMNode(stub);

  node.value = 'giraffe';
  ReactTestUtils.Simulate.change(node);
  expect(node.value).toBe('0');
});

Basically, onChange is getting ignored because inputValueTracking overrides the value property and observes new assignments. So when the change event fires afterwards, technically nothing has changed, and ChangeEventPlugin ignores it.

So far I'm exploring 2 options:

If EventPluginHub doesn't pick up any events, just dispatch a SyntheticEvent. It's already whitelisted to trusted event types.
If the event is a change event, use the current Simulate behavior of always dispatching a SyntheticEvent (which circumvents the event hub and forces the onChange handler).

What do you think?

sophiebits · 2016-09-03T00:07:17Z

GH line comments are broken, seemingly so I'll just write here.

I might be okay with breaking Simulate in this case actually. Need to think more.

This suppresses for contextmenu, mouseover, mouseout too which the original didn't. Is that intentional? If it is intentional for over/out then we should probably do enter/leave too right? If we want this before the next major maybe we can limit it to the 5 events that are currently suppressed.

When is inst._currentElement null (in inst._currentElement &&)?

Can you reformat the isInteractive to be

return (
  tag === 'button' || tag === 'input' ||
  tag === 'select' || tag === 'textarea'
);

or a switch statement returning true/false?

aweary · 2016-09-03T00:35:34Z

@spicyj did you mean to mark as accepted? Seems like there's still potential changes to make

nhunzaker · 2016-09-03T00:53:51Z

I might be okay with breaking Simulate in this case actually. Need to think more.

I'm starting to think this is an okay behavior. If I tap into EventPluginHub, I get other test failures related to the other event plugins. For example, mouse enter/leave fail. Simulate forcing an event, with SimulateNative producing the expected DOM behavior, is okay by me (for whatever my vote is worth).

This suppresses for contextmenu, mouseover, mouseout. Is that intentional? [...]

I've reordered the event switch to rule out these cases, similarly to the exceptions for Firefox. Though I'm unclear if the other events fire on disabled, I'd be happy to look into it. Either way, I agree that it is important for a non-breaking release.

When is inst._currentElement null (in inst._currentElement &&)?

It otherwise fails the following test:

https://github.com/facebook/react/blob/master/src/renderers/dom/client/__tests__/ReactEventIndependence-test.js#L53-L68

Though I'm curious if this could just be an invariant in Simulate.

Can you reformat the isInteractive to be [...] or a switch statement returning true/false?

Yep. You know I wrote a switch twice before I settled on the || chain... I've done the reformatting.

nhunzaker · 2016-09-03T00:58:10Z

Sort of unrelated, but when I was working through an attempt to update Simulate, I noticed that BeforeInputEventPlugin returns [null, null] a lot. This happens, I think, nearly every time EventPluginHub.extractEvents is invoked. Any interest in a PR that cuts the extra array allocation?

coveralls · 2016-09-03T01:01:35Z

Coverage increased (+0.002%) to 87.235% when pulling f07a542 on nhunzaker:nh-disabled-mouse-extraction into 7b247f3 on facebook:master.

coveralls · 2016-09-03T01:03:48Z

Coverage increased (+0.002%) to 87.235% when pulling f07a542 on nhunzaker:nh-disabled-mouse-extraction into 7b247f3 on facebook:master.

nhunzaker · 2016-09-06T20:36:04Z

@aweary I think I've addressed all of the comments. The only thing left is to figure out how the change to Simulate should be handled.

aweary · 2016-09-06T20:40:41Z

Thanks!

The only thing left is to figure out how the change to Simulate should be handled.

I'm going to defer to @spicyj on that

sophiebits · 2016-09-08T18:25:21Z

src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js

@@ -137,6 +137,23 @@ function getDictionaryKey(inst) {
  return '.' + inst._rootNodeID;
 }

+function isInteractive(tag) {
+  return tag === 'button' || tag === 'input' ||


return ( tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea' );

FB style doesn't do large indents to line up with previous lines – we just move the previous line down instead.

Sorry, for whatever reason I totally caught your comment wrong before. Just a sec.

sophiebits · 2016-09-08T18:26:50Z

I'm fine with the simulate change for a minor release. Can you fix up the style and rebase? Otherwise this looks great, thank you!

…lters

nhunzaker · 2016-09-08T18:47:12Z

@spicyj Done.

sophiebits · 2016-09-08T18:47:55Z

Thank you!

…in. Related perf tweak to click handlers. (facebook#7642) * Cull disabled mouse events at plugin level. Remove component level filters * DisabledInputUtils tests are now for SimpleEventPlugin * Add click bubbling test * Add isInteractive function. Use in iOS click exception rules * Invert interactive check in local click listener. Add test coverage * Reduce number of mouse events disabable. Formatting in isIteractive() * Switch isInteractive tag order for alignment * Update formatting of isInteractive method

…in. Related perf tweak to click handlers. (#7642) * Cull disabled mouse events at plugin level. Remove component level filters * DisabledInputUtils tests are now for SimpleEventPlugin * Add click bubbling test * Add isInteractive function. Use in iOS click exception rules * Invert interactive check in local click listener. Add test coverage * Reduce number of mouse events disabable. Formatting in isIteractive() * Switch isInteractive tag order for alignment * Update formatting of isInteractive method (cherry picked from commit 73c50e7)

ghost added GH Review: review-needed CLA Signed labels Sep 2, 2016

aweary reviewed Sep 2, 2016
View reviewed changes

aweary added GH Review: needs-revision and removed GH Review: review-needed labels Sep 2, 2016

ghost added the CLA Signed label Sep 2, 2016

ghost added GH Review: review-needed CLA Signed and removed GH Review: needs-revision labels Sep 2, 2016

ghost added the CLA Signed label Sep 2, 2016

sophiebits added GH Review: accepted and removed GH Review: review-needed labels Sep 3, 2016

ghost added the CLA Signed label Sep 3, 2016

nhunzaker force-pushed the nh-disabled-mouse-extraction branch from 4734a43 to 8fb7749 Compare September 3, 2016 00:49

ghost added the CLA Signed label Sep 3, 2016

ghost added the CLA Signed label Sep 6, 2016

sophiebits reviewed Sep 8, 2016
View reviewed changes

sophiebits added the semver-minor label Sep 8, 2016

sophiebits added this to the 15-next milestone Sep 8, 2016

ghost added the CLA Signed label Sep 8, 2016

nhunzaker added 8 commits September 8, 2016 14:33

Cull disabled mouse events at plugin level. Remove component level fi…

e032164

…lters

DisabledInputUtils tests are now for SimpleEventPlugin

c2f1633

Add click bubbling test

e31dce6

Add isInteractive function. Use in iOS click exception rules

420da06

Invert interactive check in local click listener. Add test coverage

795a660

Reduce number of mouse events disabable. Formatting in isIteractive()

c3e3881

Switch isInteractive tag order for alignment

a408ae2

Update formatting of isInteractive method

fcafa61

nhunzaker force-pushed the nh-disabled-mouse-extraction branch from f07a542 to fcafa61 Compare September 8, 2016 18:47

sophiebits merged commit 73c50e7 into facebook:master Sep 8, 2016

nhunzaker mentioned this pull request Sep 10, 2016

Do not allocate an array if no before input events #7691

Closed

nhunzaker mentioned this pull request Sep 20, 2016

Migrate input value change fix from 16.0.0-alpha #7303

Closed

zpao modified the milestones: 15-next, 15.4.0 Oct 4, 2016

hunthunthunt mentioned this pull request Nov 16, 2016

ReactTestUtils.Simulate no longer works as expected in v15.4.0 #8305

Closed

renovate bot mentioned this pull request Feb 2, 2018

Update dependency react to v0.14.9 - autoclosed signavio/backbone-rel#29

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move mouse event disabling on interactive elements to SimpleEventPlugin. Related perf tweak to click handlers. #7642

Move mouse event disabling on interactive elements to SimpleEventPlugin. Related perf tweak to click handlers. #7642

nhunzaker commented Sep 2, 2016

aweary Sep 2, 2016

nhunzaker Sep 2, 2016

nhunzaker Sep 2, 2016

sophiebits Sep 2, 2016

nhunzaker Sep 2, 2016 •

edited

Loading

aweary commented Sep 2, 2016

aweary commented Sep 2, 2016

nhunzaker commented Sep 2, 2016

sophiebits commented Sep 3, 2016

aweary commented Sep 3, 2016

nhunzaker commented Sep 3, 2016

nhunzaker commented Sep 3, 2016

coveralls commented Sep 3, 2016

coveralls commented Sep 3, 2016

nhunzaker commented Sep 6, 2016

aweary commented Sep 6, 2016

sophiebits Sep 8, 2016

nhunzaker Sep 8, 2016

nhunzaker Sep 8, 2016

sophiebits commented Sep 8, 2016

nhunzaker commented Sep 8, 2016

sophiebits commented Sep 8, 2016

Move mouse event disabling on interactive elements to SimpleEventPlugin. Related perf tweak to click handlers. #7642

Move mouse event disabling on interactive elements to SimpleEventPlugin. Related perf tweak to click handlers. #7642

Conversation

nhunzaker commented Sep 2, 2016

aweary Sep 2, 2016

Choose a reason for hiding this comment

nhunzaker Sep 2, 2016

Choose a reason for hiding this comment

nhunzaker Sep 2, 2016

Choose a reason for hiding this comment

sophiebits Sep 2, 2016

Choose a reason for hiding this comment

nhunzaker Sep 2, 2016 • edited Loading

Choose a reason for hiding this comment

aweary commented Sep 2, 2016

aweary commented Sep 2, 2016

nhunzaker commented Sep 2, 2016

sophiebits commented Sep 3, 2016

aweary commented Sep 3, 2016

nhunzaker commented Sep 3, 2016

nhunzaker commented Sep 3, 2016

coveralls commented Sep 3, 2016

coveralls commented Sep 3, 2016

nhunzaker commented Sep 6, 2016

aweary commented Sep 6, 2016

sophiebits Sep 8, 2016

Choose a reason for hiding this comment

nhunzaker Sep 8, 2016

Choose a reason for hiding this comment

nhunzaker Sep 8, 2016

Choose a reason for hiding this comment

sophiebits commented Sep 8, 2016

nhunzaker commented Sep 8, 2016

sophiebits commented Sep 8, 2016

nhunzaker Sep 2, 2016 •

edited

Loading