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 index 50c7673d9..ac1b0667c 100644 --- 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 index 56c2cd451..acbe26be1 100644 --- 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(); + const input = findInput(container); + expect(input.getAttribute('virtualkeyboardpolicy')).toEqual('auto'); + }); + + test('true value', () => { + const { container } = render(); + const input = findInput(container); + expect(input.getAttribute('virtualkeyboardpolicy')).toEqual('auto'); + }); + + test('false value', () => { + const { container } = render(); + 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 index 285cb2d2c..83f89af33 100644 --- 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 index 5e879d8d9..9e4b4577c 100644 --- 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, value?: ?string,