[add] Support showSoftInputOnFocus on TextInput

Close #2659 Fix #2548
necolas · May 22, 2024 · da47f21 · da47f21
1 parent 2106944
commit da47f21
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 1 deletion.
diff --git a/packages/react-native-web-docs/src/pages/docs/components/text-input.md b/packages/react-native-web-docs/src/pages/docs/components/text-input.md
@@ -5,7 +5,7 @@ permalink: /docs/text-input/index.html
 eleventyNavigation:
   key: TextInput
   parent: Components
-  label: "Change"
+  label: 'Change'
 ---
 
 {% import "fragments/macros.html" as macro with context %}
@@ -168,6 +168,10 @@ If `true`, all text will automatically be selected on focus.
 Equivalent to [HTMLElement.spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)
 {% endcall %}
 
+{% call macro.prop('showSoftInputOnFocus', '?boolean = true') %}
+If `false`, will set [HTMLElement.virtualkeyboardpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) to `manual`.
+{% endcall %}
+
 {% call macro.prop('style', '?Style') %}
 Set the styles of the view. `TextInput` supports typographic styles in addition to those of `View`.
 {% endcall %}

diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
@@ -740,6 +740,26 @@ describe('components/TextInput', () => {
     expect(input.value).toEqual(value);
   });
 
+  describe('prop "showSoftInputOnFocus"', () => {
+    test('default value', () => {
+      const { container } = render(<TextInput />);
+      const input = findInput(container);
+      expect(input.getAttribute('virtualkeyboardpolicy')).toEqual('auto');
+    });
+
+    test('true value', () => {
+      const { container } = render(<TextInput showSoftInputOnFocus={true} />);
+      const input = findInput(container);
+      expect(input.getAttribute('virtualkeyboardpolicy')).toEqual('auto');
+    });
+
+    test('false value', () => {
+      const { container } = render(<TextInput showSoftInputOnFocus={false} />);
+      const input = findInput(container);
+      expect(input.getAttribute('virtualkeyboardpolicy')).toEqual('manual');
+    });
+  });
+
   describe('imperative methods', () => {
     test('node.clear()', () => {
       const ref = React.createRef();

diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
@@ -140,6 +140,7 @@ const TextInput: React.AbstractComponent<
     secureTextEntry = false,
     selection,
     selectTextOnFocus,
+    showSoftInputOnFocus,
     spellCheck
   } = props;
 
@@ -419,6 +420,8 @@ const TextInput: React.AbstractComponent<
     caretHidden && styles.caretHidden
   ];
   supportedProps.type = multiline ? undefined : type;
+  supportedProps.virtualkeyboardpolicy =
+    showSoftInputOnFocus === false ? 'manual' : 'auto';
 
   const platformMethodsRef = usePlatformMethods(supportedProps);
 

diff --git a/packages/react-native-web/src/exports/TextInput/types.js b/packages/react-native-web/src/exports/TextInput/types.js
@@ -69,6 +69,7 @@ export type TextInputProps = {
     end?: number
   |},
   selectionColor?: ?ColorValue,
+  showSoftInputOnFocus?: ?boolean,
   spellCheck?: ?boolean,
   style?: ?GenericStyleProp<TextInputStyle>,
   value?: ?string,