Fix html.button staying unclickable on Android after toggling disabled back to false (#491)

Closes #491

## Problem

On Android, when an `html.button` (or any RSD element rendered as a `Pressable`) has its `disabled` state set to `true` and then back to `false`, the pressable's own surface remains unclickable — only its children continue to trigger the press handler. On iOS the button recovers correctly.

This does **not** reproduce with a plain React Native `<Pressable disabled={...} />`, and the usual `key`-based remount workaround "fixes" it — both signs that the regression is in how RSD forwards the prop, not in React Native itself.

## Root cause

In `createStrictDOMComponent.js`, the `disabled` prop was forwarded to the underlying `Pressable` **only when it was `true`**, and never reset when it became `false` (`disabled` is intentionally not passed through `useNativeProps`):

```js
if (NativeComponent === ReactNative.Pressable) {
  if (props.disabled === true) {
    nativeProps.disabled = true;
    nativeProps.focusable = false;
  }
}
```

So `Pressable` saw `disabled` toggle `true → undefined`, never `true → false`. React Native's `Pressable` only merges `disabled` into its `accessibilityState` when it's non-null:

```js
// react-native/Libraries/Components/Pressable/Pressable.js
_accessibilityState =
  disabled != null ? {..._accessibilityState, disabled} : _accessibilityState;
```

With `undefined`, `disabled` drops out, so `accessibilityState.disabled` goes `true → undefined` instead of `true → false`. On Android, `accessibilityState.disabled = true` sets the native view to `enabled = false`; reverting to `undefined` (rather than an explicit `false`) does not re-enable it. A disabled Android `ViewGroup` still dispatches touches to its children (so the inner text kept working) but won't claim touches on its own surface — exactly the reported symptom. iOS has no equivalent native "enabled" latch, so it recovered regardless.

Plain RN `Pressable` works because the user passes an explicit boolean that always resets to `false`.

## Fix

Always forward `disabled` to the `Pressable` as an explicit boolean, so it transitions `true ↔ false` and Android correctly resets the native enabled state:

```js
if (NativeComponent === ReactNative.Pressable) {
  // Always pass an explicit boolean so that toggling 'disabled' resets the
  // native view's enabled state. Passing 'undefined' when re-enabling leaves
  // 'accessibilityState.disabled' unset, which on Android keeps the view's
  // native 'enabled' state false and makes the Pressable unclickable.
  nativeProps.disabled = props.disabled === true;
  if (props.disabled === true) {
    nativeProps.focusable = false;
  }
}
```

## Note on `focusable` (intentionally left conditional)

`focusable` does **not** need the same symmetric treatment, for two reasons:

1. **It never reaches native as `undefined`.** `Pressable` normalizes it to an explicit boolean on every render via `focusable: focusable !== false`. So when RSD leaves it unset on re-enable, the native View receives `focusable={true}`; when disabled it receives `focusable={false}`. The value always toggles `false ↔ true` at the native layer, so there's no stale-state problem like `disabled` had.

2. **Making it unconditional would regress `tabIndex`.** `focusable` is also derived from `tabIndex` in `useNativeProps` (`nativeProps.focusable = !tabIndex`). The current code only forces `focusable = false` *while disabled* and otherwise preserves the `tabIndex`-derived value. Changing it to something like `focusable = props.disabled !== true` would clobber `tabIndex` (e.g. an enabled button with `tabIndex={-1}` would wrongly become focusable).

So the `disabled` fix alone is sufficient, and the asymmetric `focusable` handling is correct and intentional.

## Tests

- Added a `<button>` regression test asserting that after toggling `disabled` from `true` to `false`, the rendered `Pressable` emits an explicit `disabled={false}` (rather than dropping the prop).
- Full native test suite passes; Flow is clean.

Author: MoOx

packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js

@@ -90,9 +90,13 @@ export function createStrictDOMComponent<T, P extends StrictProps>(
     // Component-specific props
 
     if (NativeComponent === ReactNative.Pressable) {
+      // Always pass an explicit boolean so that toggling 'disabled' resets the
+      // native view's enabled state. Passing 'undefined' when re-enabling leaves
+      // 'accessibilityState.disabled' unset, which on Android keeps the view's
+      // native 'enabled' state false and makes the Pressable unclickable.
+      // $FlowFixMe[react-rule-hook-mutation]
+      nativeProps.disabled = props.disabled === true;
       if (props.disabled === true) {
-        // $FlowFixMe[react-rule-hook-mutation]
-        nativeProps.disabled = true;
         // $FlowFixMe[react-rule-hook-mutation]
         nativeProps.focusable = false;
       }

packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native

@@ -227,6 +227,7 @@ exports[`<html.*> "article" supports global attributes 1`] = `
 
 exports[`<html.*> "article" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -345,6 +346,7 @@ exports[`<html.*> "aside" supports global attributes 1`] = `
 
 exports[`<html.*> "aside" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -812,6 +814,7 @@ exports[`<html.*> "blockquote" supports global attributes 1`] = `
 
 exports[`<html.*> "blockquote" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -965,6 +968,7 @@ exports[`<html.*> "br" supports inline event handlers 1`] = `
 
 exports[`<html.*> "button" default rendering 1`] = `
 <Pressable
+  disabled={false}
   ref={[Function]}
   role="button"
   style={
@@ -979,6 +983,7 @@ exports[`<html.*> "button" default rendering 1`] = `
 
 exports[`<html.*> "button" ignores and warns about unsupported attributes 1`] = `
 <Pressable
+  disabled={false}
   ref={[Function]}
   role="button"
   style={
@@ -1037,6 +1042,7 @@ exports[`<html.*> "button" supports global attributes 1`] = `
     }
   }
   accessibilityViewIsModal={true}
+  disabled={false}
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
@@ -1068,6 +1074,7 @@ exports[`<html.*> "button" supports global attributes 1`] = `
 
 exports[`<html.*> "button" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -1426,6 +1433,7 @@ exports[`<html.*> "div" supports global attributes 1`] = `
 
 exports[`<html.*> "div" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -1663,6 +1671,7 @@ exports[`<html.*> "fieldset" supports global attributes 1`] = `
 
 exports[`<html.*> "fieldset" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -1781,6 +1790,7 @@ exports[`<html.*> "footer" supports global attributes 1`] = `
 
 exports[`<html.*> "footer" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -1899,6 +1909,7 @@ exports[`<html.*> "form" supports global attributes 1`] = `
 
 exports[`<html.*> "form" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -2775,6 +2786,7 @@ exports[`<html.*> "header" supports global attributes 1`] = `
 
 exports[`<html.*> "header" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -2900,6 +2912,7 @@ exports[`<html.*> "hr" supports global attributes 1`] = `
 
 exports[`<html.*> "hr" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -3805,6 +3818,7 @@ exports[`<html.*> "main" supports global attributes 1`] = `
 
 exports[`<html.*> "main" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -4046,6 +4060,7 @@ exports[`<html.*> "nav" supports global attributes 1`] = `
 
 exports[`<html.*> "nav" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -4166,6 +4181,7 @@ exports[`<html.*> "ol" supports global attributes 1`] = `
 
 exports[`<html.*> "ol" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -4298,6 +4314,7 @@ exports[`<html.*> "optgroup" supports global attributes 1`] = `
 
 exports[`<html.*> "optgroup" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -4897,6 +4914,7 @@ exports[`<html.*> "section" supports global attributes 1`] = `
 
 exports[`<html.*> "section" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -5027,6 +5045,7 @@ exports[`<html.*> "select" supports global attributes 1`] = `
 
 exports[`<html.*> "select" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
@@ -5888,6 +5907,7 @@ exports[`<html.*> "ul" supports global attributes 1`] = `
 
 exports[`<html.*> "ul" supports inline event handlers 1`] = `
 <Pressable
+  disabled={false}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}

packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap

@@ -216,6 +216,22 @@ exports[`<html.*> (native polyfills) polyfills: layout default flex layout: flex
 </ViewNativeComponent>
 `;
 
+exports[`<html.*> (native polyfills) polyfills: props <button> "disabled" prop 1`] = `
+<Pressable
+  disabled={true}
+  focusable={false}
+  ref={[Function]}
+  role="button"
+  style={
+    {
+      "borderWidth": 1,
+      "boxSizing": "content-box",
+      "position": "static",
+    }
+  }
+/>
+`;
+
 exports[`<html.*> (native polyfills) polyfills: props <img> "src" prop with loading props 1`] = `
 <Image
   crossOrigin="use-credentials"

packages/react-strict-dom/tests/html/html-test.native.js

@@ -500,6 +500,31 @@ describe('<html.*> (native polyfills)', () => {
         expect(root.toJSON()).toMatchSnapshot();
       });
     });
+
+    describe('<button>', () => {
+      test('"disabled" prop', () => {
+        let root;
+        act(() => {
+          root = create(<html.button disabled={true} />);
+        });
+        expect(root.toJSON()).toMatchSnapshot();
+      });
+
+      // Re-enabling must emit an explicit "disabled={false}" rather than
+      // dropping the prop. On Android, leaving "disabled" unset keeps the
+      // native view's enabled state false and the button stays unclickable.
+      test('"disabled" prop resets to an explicit false when re-enabled', () => {
+        let root;
+        act(() => {
+          root = create(<html.button disabled={true} />);
+        });
+        expect(root.toJSON().props.disabled).toBe(true);
+        act(() => {
+          root.update(<html.button disabled={false} />);
+        });
+        expect(root.toJSON().props.disabled).toBe(false);
+      });
+    });
   });
 
   describe('polyfills: inheritence', () => {