Fix onMouseEnter is fired on disabled buttons (#17675)

facebook · Feb 4, 2020 · 812277d · 812277d
1 parent 2078aa9
commit 812277d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/packages/legacy-events/EventPluginHub.js b/packages/legacy-events/EventPluginHub.js
@@ -45,6 +45,7 @@ function shouldPreventMouseEvent(name, type, props) {
     case 'onMouseMoveCapture':
     case 'onMouseUp':
     case 'onMouseUpCapture':
+    case 'onMouseEnter':
       return !!(props.disabled && isInteractive(type));
     default:
       return false;

diff --git a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
@@ -37,6 +37,7 @@ const ON_MOUSE_ENTER_KEY = 'onMouseEnter';
 let GRANDPARENT;
 let PARENT;
 let CHILD;
+let BUTTON;
 
 let getListener;
 let putListener;
@@ -71,6 +72,7 @@ describe('ReactBrowserEventEmitter', () => {
     let GRANDPARENT_PROPS = {};
     let PARENT_PROPS = {};
     let CHILD_PROPS = {};
+    let BUTTON_PROPS = {};
 
     function Child(props) {
       return <div ref={c => (CHILD = c)} {...props} />;
@@ -87,6 +89,7 @@ describe('ReactBrowserEventEmitter', () => {
         <div ref={c => (GRANDPARENT = c)} {...GRANDPARENT_PROPS}>
           <div ref={c => (PARENT = c)} {...PARENT_PROPS}>
             <ChildWrapper {...CHILD_PROPS} />
+            <button disabled={true} ref={c => (BUTTON = c)} {...BUTTON_PROPS} />
           </div>
         </div>,
         container,
@@ -110,6 +113,9 @@ describe('ReactBrowserEventEmitter', () => {
         case GRANDPARENT:
           GRANDPARENT_PROPS[eventName] = listener;
           break;
+        case BUTTON:
+          BUTTON_PROPS[eventName] = listener;
+          break;
       }
       // Rerender with new event listeners
       renderTree();
@@ -125,6 +131,9 @@ describe('ReactBrowserEventEmitter', () => {
         case GRANDPARENT:
           GRANDPARENT_PROPS = {};
           break;
+        case BUTTON:
+          BUTTON_PROPS = {};
+          break;
       }
       renderTree();
     };
@@ -149,6 +158,12 @@ describe('ReactBrowserEventEmitter', () => {
     expect(listener).toEqual(LISTENER);
   });
 
+  it('should not retrieve listeners on a disabled interactive element', () => {
+    putListener(BUTTON, ON_MOUSE_ENTER_KEY, recordID.bind(null, BUTTON));
+    const listener = getListener(BUTTON, ON_MOUSE_ENTER_KEY);
+    expect(listener).toBe(null);
+  });
+
   it('should clear all handlers when asked to', () => {
     registerSimpleTestHandler();
     deleteAllListeners(CHILD);