Fix onMouseEnter is fired on disabled buttons

facebook · Dec 20, 2019 · 99a4e38 · 99a4e38
1 parent 1b9328c
commit 99a4e38
Show file tree

Hide file tree

Showing 2 changed files with 14 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 ref={ c => (BUTTON = c)} {...BUTTON_PROPS}></button>
           </div>
         </div>,
         container,
@@ -109,6 +112,8 @@ describe('ReactBrowserEventEmitter', () => {
           break;
         case GRANDPARENT:
           GRANDPARENT_PROPS[eventName] = listener;
+        case BUTTON:
+          BUTTON_PROPS[eventName] = listener;
           break;
       }
       // Rerender with new event listeners
@@ -124,6 +129,8 @@ describe('ReactBrowserEventEmitter', () => {
           break;
         case GRANDPARENT:
           GRANDPARENT_PROPS = {};
+        case BUTTON:
+          BUTTON_PROPS = {};
           break;
       }
       renderTree();
@@ -149,6 +156,12 @@ describe('ReactBrowserEventEmitter', () => {
     expect(listener).toEqual(LISTENER);
   });
 
+  it('should not retrieve a listener for disabled interactive elements', () => {
+    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);