Fix missing 'id' and 'tabIndex' support for TextInput

facebook · Nov 16, 2022 · 6d6eca5 · 6d6eca5
1 parent dfeb49c
commit 6d6eca5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -1079,6 +1079,9 @@ function InternalTextInput(props: Props): React.Node {
     'aria-expanded': ariaExpanded,
     'aria-selected': ariaSelected,
     accessibilityState,
+    id,
+    tabIndex,
+    ...otherProps
   } = props;
 
   const inputRef = useRef<null | React.ElementRef<HostComponent<mixed>>>(null);
@@ -1436,15 +1439,16 @@ function InternalTextInput(props: Props): React.Node {
     textInput = (
       <RCTTextInputView
         ref={_setNativeRef}
-        {...props}
+        {...otherProps}
         {...eventHandlers}
         accessibilityState={_accessibilityState}
         accessible={accessible}
         submitBehavior={submitBehavior}
         caretHidden={caretHidden}
         dataDetectorTypes={props.dataDetectorTypes}
-        focusable={focusable}
+        focusable={tabIndex !== undefined ? !tabIndex : focusable}
         mostRecentEventCount={mostRecentEventCount}
+        nativeID={id ?? props.nativeID}
         onBlur={_onBlur}
         onKeyPressSync={props.unstable_onKeyPressSync}
         onChange={_onChange}
@@ -1485,7 +1489,7 @@ function InternalTextInput(props: Props): React.Node {
        * fixed */
       <AndroidTextInput
         ref={_setNativeRef}
-        {...props}
+        {...otherProps}
         {...eventHandlers}
         accessibilityState={_accessibilityState}
         accessibilityLabelledBy={_accessibilityLabelledBy}
@@ -1495,8 +1499,9 @@ function InternalTextInput(props: Props): React.Node {
         caretHidden={caretHidden}
         children={children}
         disableFullscreenUI={props.disableFullscreenUI}
-        focusable={focusable}
+        focusable={tabIndex !== undefined ? !tabIndex : focusable}
         mostRecentEventCount={mostRecentEventCount}
+        nativeID={id ?? props.nativeID}
         numberOfLines={props.rows ?? props.numberOfLines}
         onBlur={_onBlur}
         onChange={_onChange}

diff --git a/Libraries/Components/TextInput/__tests__/TextInput-test.js b/Libraries/Components/TextInput/__tests__/TextInput-test.js
@@ -235,8 +235,8 @@ describe('TextInput compat with web', () => {
         allowFontScaling={true}
         focusable={true}
         forwardedRef={null}
-        id="id"
         mostRecentEventCount={0}
+        nativeID="id"
         onBlur={[Function]}
         onChange={[Function]}
         onChangeSync={null}
@@ -254,7 +254,6 @@ describe('TextInput compat with web', () => {
         rejectResponderTermination={true}
         selection={null}
         submitBehavior="blurAndSubmit"
-        tabIndex={0}
         testID="testID"
         text=""
         underlineColorAndroid="transparent"
@@ -330,18 +329,14 @@ describe('TextInput compat with web', () => {
         aria-activedescendant="activedescendant"
         aria-atomic={true}
         aria-autocomplete="list"
-        aria-busy={true}
-        aria-checked={true}
         aria-columncount={5}
         aria-columnindex={3}
         aria-columnspan={2}
         aria-controls="controls"
         aria-current="current"
         aria-describedby="describedby"
         aria-details="details"
-        aria-disabled={true}
         aria-errormessage="errormessage"
-        aria-expanded={true}
         aria-flowto="flowto"
         aria-haspopup={true}
         aria-hidden={true}
@@ -365,7 +360,6 @@ describe('TextInput compat with web', () => {
         aria-rowcount={5}
         aria-rowindex={3}
         aria-rowspan={3}
-        aria-selected={true}
         aria-setsize={5}
         aria-sort="ascending"
         aria-valuemax={5}