React events: initial implementation of disabled prop (#15458)

Author: necolas

packages/react-events/src/Focus.js

@@ -117,6 +117,15 @@ const FocusResponder = {
     const shouldStopPropagation =
       props.stopPropagation === undefined ? true : props.stopPropagation;
 
+    if (props.disabled) {
+      if (state.isFocused) {
+        dispatchFocusOutEvents(context, props, state);
+        state.isFocused = false;
+        state.focusTarget = null;
+      }
+      return false;
+    }
+
     // Focus doesn't handle capture target events at this point
     if (phase === CAPTURE_PHASE) {
       return false;

packages/react-events/src/Hover.js

@@ -253,6 +253,17 @@ const HoverResponder = {
   ): boolean {
     const {type} = event;
 
+    if (props.disabled) {
+      if (state.isHovered) {
+        dispatchHoverEndEvents(event, context, props, state);
+        state.ignoreEmulatedMouseEvents = false;
+      }
+      if (state.isTouched) {
+        state.isTouched = false;
+      }
+      return false;
+    }
+
     // Hover doesn't handle capture target events at this point
     if (event.phase === CAPTURE_PHASE) {
       return false;

packages/react-events/src/Press.js

@@ -408,6 +408,13 @@ const PressResponder = {
   ): boolean {
     const {phase, target, type} = event;
 
+    if (props.disabled) {
+      dispatchPressEndEvents(context, props, state);
+      context.removeRootEventTypes(rootEventTypes);
+      state.ignoreEmulatedMouseEvents = false;
+      return false;
+    }
+
     // Press doesn't handle capture target events at this point
     if (phase === CAPTURE_PHASE) {
       return false;

packages/react-events/src/__tests__/Focus-test.internal.js

@@ -40,6 +40,29 @@ describe('Focus event responder', () => {
     container = null;
   });
 
+  describe('disabled', () => {
+    let onBlur, onFocus, ref;
+
+    beforeEach(() => {
+      onBlur = jest.fn();
+      onFocus = jest.fn();
+      ref = React.createRef();
+      const element = (
+        <Focus disabled={true} onBlur={onBlur} onFocus={onFocus}>
+          <div ref={ref} />
+        </Focus>
+      );
+      ReactDOM.render(element, container);
+    });
+
+    it('prevents custom events being dispatched', () => {
+      ref.current.dispatchEvent(createFocusEvent('focus'));
+      ref.current.dispatchEvent(createFocusEvent('blur'));
+      expect(onFocus).not.toBeCalled();
+      expect(onBlur).not.toBeCalled();
+    });
+  });
+
   describe('onBlur', () => {
     let onBlur, ref;
 

packages/react-events/src/__tests__/Hover-test.internal.js

@@ -45,6 +45,32 @@ describe('Hover event responder', () => {
     container = null;
   });
 
+  describe('disabled', () => {
+    let onHoverStart, onHoverEnd, ref;
+
+    beforeEach(() => {
+      onHoverStart = jest.fn();
+      onHoverEnd = jest.fn();
+      ref = React.createRef();
+      const element = (
+        <Hover
+          disabled={true}
+          onHoverStart={onHoverStart}
+          onHoverEnd={onHoverEnd}>
+          <div ref={ref} />
+        </Hover>
+      );
+      ReactDOM.render(element, container);
+    });
+
+    it('prevents custom events being dispatched', () => {
+      ref.current.dispatchEvent(createPointerEvent('pointerover'));
+      ref.current.dispatchEvent(createPointerEvent('pointerout'));
+      expect(onHoverStart).not.toBeCalled();
+      expect(onHoverEnd).not.toBeCalled();
+    });
+  });
+
   describe('onHoverStart', () => {
     let onHoverStart, ref;
 

packages/react-events/src/__tests__/Press-test.internal.js

@@ -55,6 +55,35 @@ describe('Event responder: Press', () => {
     container = null;
   });
 
+  describe('disabled', () => {
+    let onPressStart, onPress, onPressEnd, ref;
+
+    beforeEach(() => {
+      onPressStart = jest.fn();
+      onPress = jest.fn();
+      onPressEnd = jest.fn();
+      ref = React.createRef();
+      const element = (
+        <Press
+          disabled={true}
+          onPressStart={onPressStart}
+          onPress={onPress}
+          onPressEnd={onPressEnd}>
+          <div ref={ref} />
+        </Press>
+      );
+      ReactDOM.render(element, container);
+    });
+
+    it('prevents custom events being dispatched', () => {
+      ref.current.dispatchEvent(createPointerEvent('pointerdown'));
+      ref.current.dispatchEvent(createPointerEvent('pointerup'));
+      expect(onPressStart).not.toBeCalled();
+      expect(onPress).not.toBeCalled();
+      expect(onPressEnd).not.toBeCalled();
+    });
+  });
+
   describe('onPressStart', () => {
     let onPressStart, ref;