Skip to content

Commit

Permalink
[add] Support showSoftInputOnFocus on TextInput
Browse files Browse the repository at this point in the history
Close #2659
Fix #2548
  • Loading branch information
imaspen authored and necolas committed May 22, 2024
1 parent 2106944 commit da47f21
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down Expand Up @@ -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 %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
3 changes: 3 additions & 0 deletions packages/react-native-web/src/exports/TextInput/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ const TextInput: React.AbstractComponent<
secureTextEntry = false,
selection,
selectTextOnFocus,
showSoftInputOnFocus,
spellCheck
} = props;

Expand Down Expand Up @@ -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);

Expand Down
1 change: 1 addition & 0 deletions packages/react-native-web/src/exports/TextInput/types.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export type TextInputProps = {
end?: number
|},
selectionColor?: ?ColorValue,
showSoftInputOnFocus?: ?boolean,
spellCheck?: ?boolean,
style?: ?GenericStyleProp<TextInputStyle>,
value?: ?string,
Expand Down

0 comments on commit da47f21

Please sign in to comment.