From b3dab74cd1ca44ea82883183c1515f0ab22c8aaf Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Mon, 8 Dec 2025 15:36:14 -0800
Subject: [PATCH 1/3] Polyfill setSelectionRange, selectionStart, selectionEnd

Polyfill imperative selection APIs for input and textarea components
---
 .../createStrictDOMTextInputComponent.js      | 37 +++++++++++-
 .../src/native/modules/useStrictDOMElement.js | 33 +++++++++++
 .../src/types/renderer.native.js              |  1 +
 .../__snapshots__/compat-test.native.js.snap  |  2 +
 .../css-themes-test.native.js.snap            |  3 +
 .../__snapshots__/html-test.js.snap-native    | 10 ++++
 .../__snapshots__/html-test.native.js.snap    | 59 +++++++++++++++++++
 .../tests/html/html-refs-test.native.js       | 10 ++++
 packages/website/docs/api/03-html/index.md    | 14 ++---
 9 files changed, 160 insertions(+), 9 deletions(-)

diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js
index d9b70d28..b95de51d 100644
--- a/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js
+++ b/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js
@@ -14,6 +14,7 @@ import * as React from 'react';
 import * as ReactNative from '../react-native';
 
 import { errorMsg } from '../../shared/logUtils';
+import { mergeRefs } from '../../shared/mergeRefs';
 import { useNativeProps } from './useNativeProps';
 import { useStrictDOMElement } from './useStrictDOMElement';
 
@@ -23,8 +24,22 @@ const AnimatedTextInput = ReactNative.Animated.createAnimatedComponent<
   // $FlowFixMe: React Native animated component typing issue
 >(ReactNative.TextInput);
 
+// $FlowFixMe[unclear-type]
+type Node = any;
+
 type StrictInputProps = StrictReactDOMInputProps | StrictReactDOMTextAreaProps;
 
+// Helper to update cached selection state for selectionStart/End polyfill
+function updateCachedSelection(
+  node: ?Node,
+  selection: ?{ start: number, end: number }
+) {
+  if (node != null && selection != null) {
+    node._selectionStart = selection.start;
+    node._selectionEnd = selection.end;
+  }
+}
+
 export function createStrictDOMTextInputComponent<P: StrictInputProps, T>(
   tagName: string,
   defaultProps?: P
@@ -33,6 +48,7 @@ export function createStrictDOMTextInputComponent<P: StrictInputProps, T>(
     let NativeComponent:
       | typeof ReactNative.TextInput
       | typeof AnimatedTextInput = ReactNative.TextInput;
+    const nodeRef = React.useRef<?Node>(null);
     const elementRef = useStrictDOMElement<T>(ref, { tagName });
 
     const {
@@ -45,6 +61,7 @@ export function createStrictDOMTextInputComponent<P: StrictInputProps, T>(
       onChange,
       onInput,
       onKeyDown,
+      onSelectionChange,
       placeholder,
       readOnly,
       rows,
@@ -124,7 +141,9 @@ export function createStrictDOMTextInputComponent<P: StrictInputProps, T>(
     }
     if (onChange != null || onInput != null) {
       nativeProps.onChange = function (e) {
-        const { text } = e.nativeEvent;
+        const { text, selection } = e.nativeEvent;
+        // Update cached selection state immediately to ensure sync with onChange
+        updateCachedSelection(nodeRef.current, selection);
         if (onInput != null) {
           onInput({
             target: {
@@ -165,6 +184,14 @@ export function createStrictDOMTextInputComponent<P: StrictInputProps, T>(
         });
       };
     }
+    // Part of polyfill for selectionStart/End
+    nativeProps.onSelectionChange = function (e) {
+      const { selection } = e.nativeEvent;
+      updateCachedSelection(nodeRef.current, selection);
+      if (onSelectionChange != null) {
+        onSelectionChange(e);
+      }
+    };
     if (placeholder != null) {
       nativeProps.placeholder = placeholder;
     }
@@ -178,7 +205,13 @@ export function createStrictDOMTextInputComponent<P: StrictInputProps, T>(
       nativeProps.value = value;
     }
 
-    nativeProps.ref = elementRef;
+    nativeProps.ref = React.useMemo(
+      () =>
+        mergeRefs((node) => {
+          nodeRef.current = node;
+        }, elementRef),
+      [elementRef]
+    );
 
     // Use Animated components if necessary
     if (nativeProps.animated === true) {
diff --git a/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js b/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
index 68bc7e8a..285007bb 100644
--- a/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
+++ b/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
@@ -120,6 +120,39 @@ function getOrCreateStrictRef(
             }
           }
         });
+      } else if (tagName === 'input' || tagName === 'textarea') {
+        const setSelectionRange = node?.setSelectionRange;
+        if (setSelectionRange == null) {
+          // $FlowFixMe[prop-missing]
+          Object.defineProperty(strictRef, 'setSelectionRange', {
+            value: (a: number, b: number) => {
+              node.setSelection(a, b);
+              // Update cached selection state
+              node._selectionStart = a;
+              node._selectionEnd = b;
+            },
+            configurable: true,
+            writable: true
+          });
+        }
+        const selectionStart = node?.selectionStart;
+        if (selectionStart == null) {
+          // $FlowFixMe[prop-missing]
+          Object.defineProperty(strictRef, 'selectionStart', {
+            get() {
+              return node._selectionStart ?? 0;
+            }
+          });
+        }
+        const selectionEnd = node?.selectionEnd;
+        if (selectionEnd == null) {
+          // $FlowFixMe[prop-missing]
+          Object.defineProperty(strictRef, 'selectionEnd', {
+            get() {
+              return node._selectionEnd ?? 0;
+            }
+          });
+        }
       }
 
       memoizedStrictRefs.set(node, strictRef);
diff --git a/packages/react-strict-dom/src/types/renderer.native.js b/packages/react-strict-dom/src/types/renderer.native.js
index fbfd86d4..66e6b6a8 100644
--- a/packages/react-strict-dom/src/types/renderer.native.js
+++ b/packages/react-strict-dom/src/types/renderer.native.js
@@ -99,6 +99,7 @@ type ReactNativeProps = {
   onPointerUp?: ViewProps['onPointerUp'],
   onPress?: ?(event: PressEvent) => void,
   onScroll?: $FlowFixMe,
+  onSelectionChange?: TextInputProps['onSelectionChange'],
   onSubmitEditing?: TextInputProps['onSubmitEditing'],
   onTouchCancel?: ViewProps['onTouchCancel'],
   onTouchStart?: ViewProps['onTouchStart'],
diff --git a/packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap b/packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap
index 70e4cada..24b35837 100644
--- a/packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap
+++ b/packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap
@@ -28,6 +28,7 @@ exports[`<compat.native> "as" equals "img": as=img 1`] = `
 exports[`<compat.native> "as" equals "input": as=input 1`] = `
 <TextInput
   accessibilityLabel="label"
+  onSelectionChange={[Function]}
   placeholderTextColor="green"
   ref={[Function]}
   secureTextEntry={true}
@@ -54,6 +55,7 @@ exports[`<compat.native> "as" equals "textarea": as=textarea 1`] = `
   accessibilityLabel="label"
   multiline={true}
   numberOfLines={3}
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={{}}
 />
diff --git a/packages/react-strict-dom/tests/css/__snapshots__/css-themes-test.native.js.snap b/packages/react-strict-dom/tests/css/__snapshots__/css-themes-test.native.js.snap
index c37be260..942df477 100644
--- a/packages/react-strict-dom/tests/css/__snapshots__/css-themes-test.native.js.snap
+++ b/packages/react-strict-dom/tests/css/__snapshots__/css-themes-test.native.js.snap
@@ -57,6 +57,7 @@ exports[`css.* themes inherited themes 1`] = `
     Expect color:green
   </Text>,
   <TextInput
+    onSelectionChange={[Function]}
     placeholder="Expect placeholderTextColor:green"
     placeholderTextColor="green"
     ref={[Function]}
@@ -91,6 +92,7 @@ exports[`css.* themes inherited themes 1`] = `
       Expect color:green (inherited)
     </Text>
     <TextInput
+      onSelectionChange={[Function]}
       placeholder="Expect placeholderTextColor:green"
       placeholderTextColor="green"
       ref={[Function]}
@@ -125,6 +127,7 @@ exports[`css.* themes inherited themes 1`] = `
         Expect color:blue (nested)
       </Text>
       <TextInput
+        onSelectionChange={[Function]}
         placeholder="Expect placeholderTextColor:blue"
         placeholderTextColor="blue"
         ref={[Function]}
diff --git a/packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native b/packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native
index 3a58dd98..aade6bb4 100644
--- a/packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native
+++ b/packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native
@@ -3126,6 +3126,7 @@ exports[`<html.*> "img" supports inline event handlers 1`] = `
 
 exports[`<html.*> "input" default rendering 1`] = `
 <TextInput
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -3139,6 +3140,7 @@ exports[`<html.*> "input" default rendering 1`] = `
 
 exports[`<html.*> "input" ignores and warns about unsupported attributes 1`] = `
 <TextInput
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -3158,6 +3160,7 @@ exports[`<html.*> "input" supports additional input attributes 1`] = `
   focusable={false}
   maxLength="10"
   onChange={[Function]}
+  onSelectionChange={[Function]}
   placeholder="Placeholder"
   ref={[Function]}
   style={
@@ -3206,6 +3209,7 @@ exports[`<html.*> "input" supports global attributes 1`] = `
   importantForAccessibility="no-hide-descendants"
   inputMode="numeric"
   nativeID="some-id"
+  onSelectionChange={[Function]}
   ref={[Function]}
   role="article"
   spellCheck={true}
@@ -3250,6 +3254,7 @@ exports[`<html.*> "input" supports inline event handlers 1`] = `
   onPointerUp={[Function]}
   onPress={[Function]}
   onScroll={[Function]}
+  onSelectionChange={[Function]}
   onSubmitEditing={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
@@ -5402,6 +5407,7 @@ exports[`<html.*> "sup" supports inline event handlers 1`] = `
 exports[`<html.*> "textarea" default rendering 1`] = `
 <TextInput
   multiline={true}
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -5417,6 +5423,7 @@ exports[`<html.*> "textarea" default rendering 1`] = `
 exports[`<html.*> "textarea" ignores and warns about unsupported attributes 1`] = `
 <TextInput
   multiline={true}
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -5439,6 +5446,7 @@ exports[`<html.*> "textarea" supports additional textarea attributes 1`] = `
   multiline={true}
   numberOfLines={3}
   onChange={[Function]}
+  onSelectionChange={[Function]}
   placeholder="Placeholder"
   ref={[Function]}
   style={
@@ -5488,6 +5496,7 @@ exports[`<html.*> "textarea" supports global attributes 1`] = `
   importantForAccessibility="no-hide-descendants"
   multiline={true}
   nativeID="some-id"
+  onSelectionChange={[Function]}
   ref={[Function]}
   role="article"
   spellCheck={true}
@@ -5534,6 +5543,7 @@ exports[`<html.*> "textarea" supports inline event handlers 1`] = `
   onPointerUp={[Function]}
   onPress={[Function]}
   onScroll={[Function]}
+  onSelectionChange={[Function]}
   onSubmitEditing={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
diff --git a/packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap b/packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap
index 60c1d112..b7d6a17b 100644
--- a/packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap
+++ b/packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap
@@ -84,6 +84,7 @@ exports[`<html.*> (native polyfills) polyfills: inheritence inherited styles 1`]
       Inherits text styles
     </Text>
     <TextInput
+      onSelectionChange={[Function]}
       placeholder="Does not inherit text styles"
       ref={[Function]}
       style={
@@ -249,6 +250,7 @@ exports[`<html.*> (native polyfills) polyfills: props <img> "srcSet" prop with l
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "additional-name" 1`] = `
 <TextInput
   autoComplete="additional-name"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -263,6 +265,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "address-line1" 1`] = `
 <TextInput
   autoComplete="address-line1"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -277,6 +280,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "address-line2" 1`] = `
 <TextInput
   autoComplete="address-line2"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -291,6 +295,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "bday" 1`] = `
 <TextInput
   autoComplete="bday"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -305,6 +310,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "bday-day" 1`] = `
 <TextInput
   autoComplete="bday-day"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -319,6 +325,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "bday-month" 1`] = `
 <TextInput
   autoComplete="bday-month"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -333,6 +340,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "bday-year" 1`] = `
 <TextInput
   autoComplete="bday-year"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -347,6 +355,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "cc-csc" 1`] = `
 <TextInput
   autoComplete="cc-csc"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -361,6 +370,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "cc-exp" 1`] = `
 <TextInput
   autoComplete="cc-exp"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -375,6 +385,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "cc-exp-month" 1`] = `
 <TextInput
   autoComplete="cc-exp-month"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -389,6 +400,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "cc-exp-year" 1`] = `
 <TextInput
   autoComplete="cc-exp-year"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -403,6 +415,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "cc-number" 1`] = `
 <TextInput
   autoComplete="cc-number"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -417,6 +430,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "country" 1`] = `
 <TextInput
   autoComplete="country"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -431,6 +445,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "current-password" 1`] = `
 <TextInput
   autoComplete="current-password"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -445,6 +460,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "email" 1`] = `
 <TextInput
   autoComplete="email"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -459,6 +475,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "family-name" 1`] = `
 <TextInput
   autoComplete="family-name"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -473,6 +490,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "given-name" 1`] = `
 <TextInput
   autoComplete="given-name"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -487,6 +505,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "honorific-prefix" 1`] = `
 <TextInput
   autoComplete="honorific-prefix"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -501,6 +520,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "honorific-suffix" 1`] = `
 <TextInput
   autoComplete="honorific-suffix"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -515,6 +535,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "name" 1`] = `
 <TextInput
   autoComplete="name"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -529,6 +550,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "new-password" 1`] = `
 <TextInput
   autoComplete="new-password"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -543,6 +565,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "nickname" 1`] = `
 <TextInput
   autoComplete="nickname"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -557,6 +580,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "off" 1`] = `
 <TextInput
   autoComplete="off"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -571,6 +595,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "on" 1`] = `
 <TextInput
   autoComplete="on"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -585,6 +610,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "one-time-code" 1`] = `
 <TextInput
   autoComplete="one-time-code"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -599,6 +625,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "organization" 1`] = `
 <TextInput
   autoComplete="organization"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -613,6 +640,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "organization-title" 1`] = `
 <TextInput
   autoComplete="organization-title"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -627,6 +655,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "postal-code" 1`] = `
 <TextInput
   autoComplete="postal-code"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -641,6 +670,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "sex" 1`] = `
 <TextInput
   autoComplete="sex"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -655,6 +685,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "street-address" 1`] = `
 <TextInput
   autoComplete="street-address"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -669,6 +700,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "tel" 1`] = `
 <TextInput
   autoComplete="tel"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -683,6 +715,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "tel-country-code" 1`] = `
 <TextInput
   autoComplete="tel-country-code"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -697,6 +730,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "tel-national" 1`] = `
 <TextInput
   autoComplete="tel-national"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -711,6 +745,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "url" 1`] = `
 <TextInput
   autoComplete="url"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -725,6 +760,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" pro
 exports[`<html.*> (native polyfills) polyfills: props <input> "autoComplete" prop: "username" 1`] = `
 <TextInput
   autoComplete="username"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -741,6 +777,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "disabled" prop 1`
   disabled={true}
   editable={false}
   focusable={false}
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -754,6 +791,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "disabled" prop 1`
 
 exports[`<html.*> (native polyfills) polyfills: props <input> "style" prop 1`] = `
 <TextInput
+  onSelectionChange={[Function]}
   placeholderTextColor="pink"
   ref={[Function]}
   style={
@@ -771,6 +809,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "style" prop 1`] =
 exports[`<html.*> (native polyfills) polyfills: props <input> "type" prop: "email" 1`] = `
 <TextInput
   inputMode="email"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -785,6 +824,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "type" prop: "emai
 exports[`<html.*> (native polyfills) polyfills: props <input> "type" prop: "number" 1`] = `
 <TextInput
   inputMode="numeric"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -798,6 +838,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "type" prop: "numb
 
 exports[`<html.*> (native polyfills) polyfills: props <input> "type" prop: "password" 1`] = `
 <TextInput
+  onSelectionChange={[Function]}
   ref={[Function]}
   secureTextEntry={true}
   style={
@@ -813,6 +854,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "type" prop: "pass
 exports[`<html.*> (native polyfills) polyfills: props <input> "type" prop: "search" 1`] = `
 <TextInput
   inputMode="search"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -827,6 +869,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "type" prop: "sear
 exports[`<html.*> (native polyfills) polyfills: props <input> "type" prop: "tel" 1`] = `
 <TextInput
   inputMode="tel"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -841,6 +884,7 @@ exports[`<html.*> (native polyfills) polyfills: props <input> "type" prop: "tel"
 exports[`<html.*> (native polyfills) polyfills: props <input> "type" prop: "url" 1`] = `
 <TextInput
   inputMode="url"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -858,6 +902,7 @@ exports[`<html.*> (native polyfills) polyfills: props <textarea> "disabled" prop
   editable={false}
   focusable={false}
   multiline={true}
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -874,6 +919,7 @@ exports[`<html.*> (native polyfills) polyfills: props <textarea> "rows" prop 1`]
 <TextInput
   multiline={true}
   numberOfLines={5}
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -980,6 +1026,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop 1`] =
 
 exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop: "false" 1`] = `
 <TextInput
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -993,6 +1040,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop: "fal
 
 exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop: "false" 2`] = `
 <TextInput
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -1007,6 +1055,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop: "fal
 
 exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop: "hidden" 1`] = `
 <TextInput
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -1021,6 +1070,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop: "hid
 
 exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop: "true" 1`] = `
 <TextInput
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -1035,6 +1085,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop: "tru
 
 exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop: "true" 2`] = `
 <TextInput
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -1049,6 +1100,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop: "tru
 
 exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop: "until-found" 1`] = `
 <TextInput
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -1083,6 +1135,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "hidden" prop: disp
 exports[`<html.*> (native polyfills) polyfills: props global "inputMode" prop: "decimal" 1`] = `
 <TextInput
   inputMode="decimal"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -1097,6 +1150,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "inputMode" prop: "
 exports[`<html.*> (native polyfills) polyfills: props global "inputMode" prop: "email" 1`] = `
 <TextInput
   inputMode="email"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -1111,6 +1165,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "inputMode" prop: "
 exports[`<html.*> (native polyfills) polyfills: props global "inputMode" prop: "numeric" 1`] = `
 <TextInput
   inputMode="numeric"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -1125,6 +1180,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "inputMode" prop: "
 exports[`<html.*> (native polyfills) polyfills: props global "inputMode" prop: "search" 1`] = `
 <TextInput
   inputMode="search"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -1139,6 +1195,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "inputMode" prop: "
 exports[`<html.*> (native polyfills) polyfills: props global "inputMode" prop: "tel" 1`] = `
 <TextInput
   inputMode="tel"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -1153,6 +1210,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "inputMode" prop: "
 exports[`<html.*> (native polyfills) polyfills: props global "inputMode" prop: "url" 1`] = `
 <TextInput
   inputMode="url"
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
@@ -1167,6 +1225,7 @@ exports[`<html.*> (native polyfills) polyfills: props global "inputMode" prop: "
 exports[`<html.*> (native polyfills) polyfills: props global "tabIndex" prop 1`] = `
 <TextInput
   focusable={false}
+  onSelectionChange={[Function]}
   ref={[Function]}
   style={
     {
diff --git a/packages/react-strict-dom/tests/html/html-refs-test.native.js b/packages/react-strict-dom/tests/html/html-refs-test.native.js
index b828975f..2a561462 100644
--- a/packages/react-strict-dom/tests/html/html-refs-test.native.js
+++ b/packages/react-strict-dom/tests/html/html-refs-test.native.js
@@ -25,11 +25,15 @@ describe('<html.*> refs', () => {
   });
 
   describe('imperative api', () => {
+    const setSelectionMock = jest.fn();
+
+    // This mock should only built-in host element APIs (React Native)
     function createNodeMock(element) {
       const obj = {};
       obj.blur = () => {};
       obj.focus = () => {};
       obj.offsetWidth = 15;
+      obj.setSelection = setSelectionMock;
       return obj;
     }
 
@@ -39,6 +43,12 @@ describe('<html.*> refs', () => {
           <html.input
             ref={(node) => {
               expect(node.offsetWidth).toBe(15);
+              expect(node.selectionStart).toBe(0);
+              expect(node.selectionEnd).toBe(0);
+              expect(() => node.setSelectionRange(1, 5)).not.toThrow();
+              expect(setSelectionMock).toHaveBeenCalledWith(1, 5);
+              expect(node.selectionStart).toBe(1);
+              expect(node.selectionEnd).toBe(5);
             }}
           />,
           { createNodeMock }
diff --git a/packages/website/docs/api/03-html/index.md b/packages/website/docs/api/03-html/index.md
index b4f78f58..e0b33679 100644
--- a/packages/website/docs/api/03-html/index.md
+++ b/packages/website/docs/api/03-html/index.md
@@ -315,22 +315,22 @@ The following tables represent the compatibility status of the strict HTML API s
 | HTMLElement.offsetParent | ✅ | ✅ | |
 | HTMLElement.offsetTop | ✅ | ✅ | |
 | HTMLElement.offsetWidth | ✅ | ✅ | |
-| HTMLImageElement.complete | ❌ | ❌ | |
+| HTMLImageElement.complete | 🟡 | 🟡 | |
 | HTMLImageElement.currentSrc | ❌ | ❌ | |
 | HTMLImageElement.naturalHeight | ❌ | ❌ | |
 | HTMLImageElement.naturalWidth | ❌ | ❌ | |
 | HTMLInputElement.disabled | ❌ | ❌ | |
 | HTMLInputElement.select() | ❌ | ❌ | |
 | HTMLInputElement.selectionDirection | ❌ | ❌ | |
-| HTMLInputElement.selectionEnd | ❌ | ❌ | |
-| HTMLInputElement.selectionStart | ❌ | ❌ | |
-| HTMLInputElement.setSelectionRange() | ❌ | ❌ | |
+| HTMLInputElement.selectionEnd | 🟡 | 🟡 | |
+| HTMLInputElement.selectionStart | 🟡 | 🟡 | |
+| HTMLInputElement.setSelectionRange() | 🟡 | 🟡 | |
 | HTMLInputElement.showPicker() | ❌ | ❌ | |
 | HTMLInputElement.value | ❌ | ❌ | |
 | HTMLTextAreaElement.disabled | ❌ | ❌ | |
 | HTMLTextAreaElement.select() | ❌ | ❌ | |
 | HTMLTextAreaElement.selectionDirection | ❌ | ❌ | |
-| HTMLTextAreaElement.selectionEnd | ❌ | ❌ | |
-| HTMLTextAreaElement.selectionStart | ❌ | ❌ | |
-| HTMLTextAreaElement.setSelectionRange() | ❌ | ❌ | |
+| HTMLTextAreaElement.selectionEnd | 🟡 | 🟡 | |
+| HTMLTextAreaElement.selectionStart | 🟡 | 🟡 | |
+| HTMLTextAreaElement.setSelectionRange() | 🟡 | 🟡 | |
 | HTMLTextAreaElement.value | ❌ | ❌ | |

From 9415bd232c91c15e9d05c33f4390c7241cf6391a Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Mon, 8 Dec 2025 15:51:07 -0800
Subject: [PATCH 2/3] Guard use of AccessibilityInfo API

Not all native platforms implement this part of React Native.
---
 .../native/modules/usePrefersReducedMotion.js | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/react-strict-dom/src/native/modules/usePrefersReducedMotion.js b/packages/react-strict-dom/src/native/modules/usePrefersReducedMotion.js
index 4f61220e..74441e31 100644
--- a/packages/react-strict-dom/src/native/modules/usePrefersReducedMotion.js
+++ b/packages/react-strict-dom/src/native/modules/usePrefersReducedMotion.js
@@ -11,29 +11,34 @@ import * as ReactNative from '../react-native';
 
 import { useEffect, useState } from 'react';
 
+const hasReducedMotionAPI =
+  ReactNative?.AccessibilityInfo?.isReduceMotionEnabled;
+
 export function usePrefersReducedMotion(): boolean {
   const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
 
   useEffect(() => {
-    // 1. Get the initial value of reduce motion
-    ReactNative.AccessibilityInfo.isReduceMotionEnabled().then(
-      (isReduceMotionEnabled) => {
-        setPrefersReducedMotion(isReduceMotionEnabled);
-      }
-    );
-
-    // 2. Subscribe to changes in reduce motion
-    const reduceMotionChangedSubscription =
-      ReactNative.AccessibilityInfo.addEventListener(
-        'reduceMotionChanged',
+    if (hasReducedMotionAPI) {
+      // 1. Get the initial value of reduce motion
+      ReactNative.AccessibilityInfo.isReduceMotionEnabled().then(
         (isReduceMotionEnabled) => {
           setPrefersReducedMotion(isReduceMotionEnabled);
         }
       );
 
-    return () => {
-      reduceMotionChangedSubscription.remove();
-    };
+      // 2. Subscribe to changes in reduce motion
+      const reduceMotionChangedSubscription =
+        ReactNative.AccessibilityInfo.addEventListener(
+          'reduceMotionChanged',
+          (isReduceMotionEnabled) => {
+            setPrefersReducedMotion(isReduceMotionEnabled);
+          }
+        );
+
+      return () => {
+        reduceMotionChangedSubscription.remove();
+      };
+    }
   }, []);
 
   return prefersReducedMotion;

From e76ca4c22b2aa1fb9eca12e76b995c6a37ec403d Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Mon, 8 Dec 2025 16:32:04 -0800
Subject: [PATCH 3/3] Rename "Values" flow type

`Values` is a reserved type name
---
 .../react-strict-dom/src/native/modules/mediaQuery.js.flow    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-strict-dom/src/native/modules/mediaQuery.js.flow b/packages/react-strict-dom/src/native/modules/mediaQuery.js.flow
index a2ccb108..865c345a 100644
--- a/packages/react-strict-dom/src/native/modules/mediaQuery.js.flow
+++ b/packages/react-strict-dom/src/native/modules/mediaQuery.js.flow
@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-type Values = $ReadOnly<{
+type MediaQueryValues = $ReadOnly<{
   type?: 'screen',
   width?: number,
   height?: number,
@@ -18,5 +18,5 @@ type Values = $ReadOnly<{
 }>;
 
 declare export const mediaQuery : {
-  match: (mediaQuery: string, values: Values) => boolean
+  match: (mediaQuery: string, values: MediaQueryValues) => boolean
 };