Add more non-React events to the priority list

facebook · Feb 9, 2021 · 3d593a1 · 3d593a1
1 parent 212b1c7
commit 3d593a1
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -258,4 +258,37 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       expect(container.textContent).toEqual('hovered');
     });
   });
+
+  // @gate experimental
+  // @gate enableDiscreteEventMicroTasks && enableNativeEventPriorityInference
+  it('mouse enter should be user-blocking but not discrete', async () => {
+    const root = ReactDOM.unstable_createRoot(container);
+
+    const target = React.createRef(null);
+    function Foo() {
+      const [isHover, setHover] = React.useState(false);
+      React.useLayoutEffect(() => {
+        target.current.onmouseenter = () => setHover(true);
+      });
+      return <div ref={target}>{isHover ? 'hovered' : 'not hovered'}</div>;
+    }
+
+    await act(async () => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toEqual('not hovered');
+
+    await act(async () => {
+      // Note: React does not use native mouseenter/mouseleave events
+      // but we should still correctly determine their priority.
+      const mouseEnterEvent = document.createEvent('MouseEvents');
+      mouseEnterEvent.initEvent('mouseenter', true, true);
+      dispatchAndSetCurrentEvent(target.current, mouseEnterEvent);
+
+      // 3s should be enough to expire the updates
+      Scheduler.unstable_advanceTime(3000);
+      expect(Scheduler).toFlushExpired([]);
+      expect(container.textContent).toEqual('hovered');
+    });
+  });
 });
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -397,6 +397,16 @@ export function getEventPriority(domEventName: DOMEventName): * {
     // eslint-disable-next-line no-fallthrough
     case 'beforeblur':
     case 'afterblur':
+    // Not used by React but could be by user code:
+    // eslint-disable-next-line no-fallthrough
+    case 'beforeinput':
+    case 'blur':
+    case 'fullscreenchange':
+    case 'focus':
+    case 'hashchange':
+    case 'popstate':
+    case 'select':
+    case 'selectstart':
       return InputDiscreteLanePriority;
     case 'drag':
     case 'dragenter':
@@ -413,6 +423,10 @@ export function getEventPriority(domEventName: DOMEventName): * {
     case 'toggle':
     case 'touchmove':
     case 'wheel':
+    // Not used by React but could be by user code:
+    // eslint-disable-next-line no-fallthrough
+    case 'mouseenter':
+    case 'mouseleave':
       return InputContinuousLanePriority;
     default:
       return DefaultLanePriority;