[Web] Drop a handler from the orchestrator when it gets disabled mid-gesture (#4504)

## Description

Disabling a `Touchable`/`Pressable` while a press was in progress killed
every other button on the page: nothing pressed after that would begin.

When a handler is disabled mid-gesture, `updateGestureConfig` cancels it
and `moveToState` immediately resets the disabled handler back to
`UNDETERMINED`. The orchestrator's finished-handler cleanup runs later
in a microtask and only drops handlers whose state is finished, so it
skipped this one and left it recorded. Every later button consulted that
stale entry in `shouldBeginWithRecordedHandlers` and cancelled itself.

`updateGestureConfig` now resets the handler and removes it from the
orchestrator itself after the `cancel`/`fail`. A handler that never
began still skips the cancel, as before, and is just reset and
unrecorded.

The web button also resets its press visuals instantly instead of
running the press-out transition when the cancel comes from the disable
itself: no pointer lifted, and a disable usually restyles the button in
the same frame, so the fade showed as a brief flash.

## Test plan

Added a test in `GestureHandler.test.ts` that fails without the fix.

Manually: a `Touchable` that disables itself shortly after `onPressIn`,
e.g. a 700 ms timeout, held past that point, next to a second
`Touchable` that re-enables it.

- `onPressOut` fires when the button gets disabled and `onPress` does
not fire on release
- the second button still works afterwards
- after re-enabling, the first button works again
- the button snaps to its resting look on disable, with no flash

<details>
<summary>Tested on the following code:</summary>

```tsx
import React, { useCallback, useRef, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Touchable } from 'react-native-gesture-handler';

// A button that gets disabled while a press is in progress.
// Press and hold the blue box. After `DISABLE_AFTER_MS` it disables itself.
// Expected: onPressOut fires at that moment, onPress never fires on release,
// and the press animation resets instead of staying stuck (macOS especially).
const DISABLE_AFTER_MS = 700;

export default function EmptyExample() {
  const [disabled, setDisabled] = useState(false);
  const [log, setLog] = useState<string[]>([]);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  const push = useCallback((entry: string) => {
    console.log(`RNGH-mid-press: ${entry}`);
    setLog((l) => [...l.slice(-7), entry]);
  }, []);

  const onPressIn = useCallback(() => {
    push('onPressIn');
    timer.current = setTimeout(() => {
      push(`disabled after ${DISABLE_AFTER_MS}ms`);
      setDisabled(true);
    }, DISABLE_AFTER_MS);
  }, [push]);

  const onPressOut = useCallback(() => {
    push('onPressOut');
    if (timer.current) {
      clearTimeout(timer.current);
      timer.current = null;
    }
  }, [push]);

  const onPress = useCallback(() => push('onPress'), [push]);

  const reset = useCallback(() => {
    setDisabled(false);
    setLog([]);
  }, []);

  return (
    <View style={styles.container}>
      <Text>
        Hold the box for longer than {DISABLE_AFTER_MS}ms. It disables itself
        mid-press.
      </Text>
      <Touchable
        disabled={disabled}
        onPressIn={onPressIn}
        onPressOut={onPressOut}
        onPress={onPress}
        activeOpacity={0.4}
        style={[styles.box, disabled ? styles.boxDisabled : styles.boxEnabled]}>
        <Text style={styles.boxText}>{disabled ? 'disabled' : 'hold me'}</Text>
      </Touchable>
      <Touchable onPress={reset} style={styles.reset}>
        <Text style={styles.boxText}>re-enable and clear log</Text>
      </Touchable>
      {log.map((entry, i) => (
        <Text key={i} style={styles.log}>
          {entry}
        </Text>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    gap: 12,
  },
  box: {
    height: 100,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  boxEnabled: {
    backgroundColor: '#5b7bd5',
  },
  boxDisabled: {
    backgroundColor: '#9a9a9a',
  },
  boxText: {
    color: 'white',
    fontWeight: '600',
  },
  reset: {
    height: 44,
    borderRadius: 8,
    backgroundColor: '#3a3a3a',
    justifyContent: 'center',
    alignItems: 'center',
  },
  log: {
    fontVariant: ['tabular-nums'],
  },
});
```

</details>

Author: m-bert

packages/react-native-gesture-handler/src/components/GestureHandlerButton.web.tsx

@@ -558,7 +558,12 @@ export const ButtonComponent = ({
       : defaultScale;
 
   const easing = 'cubic-bezier(0.5, 1, 0.89, 1)';
-  const effectiveDuration = prefersReducedMotion() ? 0 : currentDuration;
+  // A disabled button snaps: a cancel that comes from the disable itself is not
+  // a lifted pointer, and fading it would overlap the restyle that usually
+  // comes with disabling and show as a flash. Re-enabling keeps the last
+  // duration, so a hover that resumes still animates.
+  const effectiveDuration =
+    prefersReducedMotion() || !enabled ? 0 : currentDuration;
   const transitionProps: string[] = [];
   if (hasOpacity) {
     transitionProps.push(`opacity ${effectiveDuration}ms ${easing}`);

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -861,17 +861,19 @@ export default abstract class GestureHandler implements IGestureHandler {
       return;
     }
 
-    switch (this.state) {
-      case State.ACTIVE:
-        this.fail(true);
-        break;
-      case State.UNDETERMINED:
-        GestureHandlerOrchestrator.instance.removeHandlerFromOrchestrator(this);
-        break;
-      default:
-        this.cancel(true);
-        break;
-    }
+    if (this.state === State.ACTIVE) {
+      this.fail(true);
+    } else if (this.state !== State.UNDETERMINED) {
+      // `cancel` also fires from UNDETERMINED. Most disables hit a handler
+      // that never began (e.g. a button created disabled), and running the
+      // cancel pipeline for those only produces cancel side effects.
+      this.cancel(true);
+    }
+
+    // The cancel/fail above lands in `moveToState`, which resets a disabled
+    // handler to UNDETERMINED right away. The orchestrator's finished-handler
+    // cleanup would then skip it and leave it recorded, so drop it now.
+    GestureHandlerOrchestrator.instance.dropHandler(this);
   }
 
   private checkHitSlop(): boolean {

packages/react-native-gesture-handler/src/web/handlers/__tests__/GestureHandler.test.ts

@@ -1,6 +1,8 @@
+import { State } from '../../../State';
 import type { Config } from '../../interfaces';
 import EventManager from '../../tools/EventManager';
 import type { GestureHandlerDelegate } from '../../tools/GestureHandlerDelegate';
+import GestureHandlerOrchestrator from '../../tools/GestureHandlerOrchestrator';
 import { GestureHandlerWebDelegate } from '../../tools/GestureHandlerWebDelegate';
 import GestureHandler from '../GestureHandler';
 import type IGestureHandler from '../IGestureHandler';
@@ -19,6 +21,7 @@ class TestEventManager extends EventManager<unknown> {
 function createHandler(enabled: boolean) {
   const delegate = {
     onEnabledChange: jest.fn(),
+    reset: jest.fn(),
   } as unknown as GestureHandlerDelegate<unknown, IGestureHandler>;
   const handler = new TestGestureHandler(delegate);
 
@@ -40,6 +43,7 @@ describe('GestureHandler web config reset', () => {
     const delegate = {
       onEnabledChange: jest.fn(),
       updateDOM: jest.fn(),
+      reset: jest.fn(),
     };
     const handler = new TestGestureHandler(
       delegate as unknown as GestureHandlerDelegate<unknown, IGestureHandler>
@@ -74,3 +78,37 @@ describe('GestureHandler web event manager attachment', () => {
     expect(manager.registerListeners).not.toHaveBeenCalled();
   });
 });
+
+describe('GestureHandler web disable mid-gesture', () => {
+  afterEach(() => {
+    // The orchestrator is a singleton, drop handlers recorded by the test.
+    (
+      GestureHandlerOrchestrator.instance as unknown as {
+        gestureHandlers: IGestureHandler[];
+      }
+    ).gestureHandlers = [];
+  });
+
+  test('a handler disabled while begun is dropped from the orchestrator', () => {
+    const delegate = {
+      onEnabledChange: jest.fn(),
+      onCancel: jest.fn(),
+      reset: jest.fn(),
+    } as unknown as GestureHandlerDelegate<unknown, IGestureHandler>;
+    const handler = new TestGestureHandler(delegate);
+    handler.setGestureConfig({ enabled: true });
+    // The full event pipeline is not under test, silence event emission.
+    handler.sendEvent = jest.fn();
+
+    GestureHandlerOrchestrator.instance.recordHandlerIfNotPresent(handler);
+    handler.begin();
+    expect(handler.state).toBe(State.BEGAN);
+
+    handler.setGestureConfig({ enabled: false });
+
+    expect(handler.state).toBe(State.UNDETERMINED);
+    expect(GestureHandlerOrchestrator.instance.isHandlerRecorded(handler)).toBe(
+      false
+    );
+  });
+});

packages/react-native-gesture-handler/src/web/tools/GestureHandlerOrchestrator.ts

@@ -32,6 +32,11 @@ export default class GestureHandlerOrchestrator {
     handler.activationIndex = Number.MAX_VALUE;
   }
 
+  public dropHandler(handler: IGestureHandler): void {
+    this.cleanHandler(handler);
+    this.removeHandlerFromOrchestrator(handler);
+  }
+
   public isHandlerRecorded(handler: IGestureHandler): boolean {
     return this.gestureHandlers.includes(handler);
   }