Invert interactive check in local click listener. Add test coverage

facebook · Sep 3, 2016 · 1ac8c5b · 1ac8c5b
1 parent ee207aa
commit 1ac8c5b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js b/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js
@@ -295,7 +295,7 @@ var SimpleEventPlugin = {
     // fire. The workaround for this bug involves attaching an empty click
     // listener on the target node.
     // http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
-    if (registrationName === 'onClick' && isInteractive(inst._tag)) {
+    if (registrationName === 'onClick' && !isInteractive(inst._tag)) {
       var key = getDictionaryKey(inst);
       var node = ReactDOMComponentTree.getNodeFromInstance(inst);
       if (!onClickListeners[key]) {
@@ -309,7 +309,7 @@ var SimpleEventPlugin = {
   },
 
   willDeleteListener: function(inst, registrationName) {
-    if (registrationName === 'onClick' && isInteractive(inst._tag)) {
+    if (registrationName === 'onClick' && !isInteractive(inst._tag)) {
       var key = getDictionaryKey(inst);
       onClickListeners[key].remove();
       delete onClickListeners[key];

diff --git a/src/renderers/dom/client/eventPlugins/__tests__/SimpleEventPlugin-test.js b/src/renderers/dom/client/eventPlugins/__tests__/SimpleEventPlugin-test.js
@@ -119,4 +119,37 @@ describe('SimpleEventPlugin', function() {
       });
     });
   });
+
+
+  describe('iOS bubbling click fix', function() {
+    // See http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
+
+    beforeEach(function() {
+      onClick.mockClear();
+    });
+
+    it ('does not add a local click to interactive elements', function() {
+      var container = document.createElement('div');
+
+      ReactDOM.render(<button onClick={ onClick }></button>, container);
+
+      var node = container.firstChild;
+
+      node.dispatchEvent(new MouseEvent('click'));
+
+      expect(onClick.mock.calls.length).toBe(0);
+    });
+
+    it ('adds a local click listener to non-interactive elements', function() {
+      var container = document.createElement('div');
+
+      ReactDOM.render(<div onClick={ onClick }></div>, container);
+
+      var node = container.firstChild;
+
+      node.dispatchEvent(new MouseEvent('click'));
+
+      expect(onClick.mock.calls.length).toBe(0);
+    });
+  });
 });