zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-22 14:21:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] TextInput keyboardType for 'numeric' and 'decimal'

Browse Source 
Don't rely on native restrictions and validations for these keyboardType
values, as developers often want custom presentation (e.g., comma separators)
and custom validation.

Fix #1705
Fix #1438
Fix #1280
Close #1709
This commit is contained in:
Richard Lindhout
2020-08-20 13:07:04 +02:00
committed by Nicolas Gallagher
parent 7a8a70b948
commit 9ed0c407a9
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
Vendored
+13 -1
View File
@@ -165,10 +165,22 @@ describe('components/TextInput', () => {
expect(input.type).toEqual('email');
});
test('value "decimal-pad"', () => {
const { container } = render(<TextInput keyboardType="decimal-pad" />);
const input = findInput(container);
expect(input.inputMode).toEqual('decimal');
});
test('value "number-pad"', () => {
const { container } = render(<TextInput keyboardType="number-pad" />);
const input = findInput(container);
expect(input.inputMode).toEqual('numeric');
});
test('value "numeric"', () => {
const { container } = render(<TextInput keyboardType="numeric" />);
const input = findInput(container);
expect(input.type).toEqual('number');
expect(input.inputMode).toEqual('numeric');
});
test('value "phone-pad"', () => {
packages/react-native-web/src/exports/TextInput/index.js
Vendored
+6 -1
View File
@@ -155,6 +155,7 @@ const TextInput = forwardRef<TextInputProps, *>((props, forwardedRef) => {
} = props;
let type;
let inputMode;
switch (keyboardType) {
case 'email-address':
@@ -162,7 +163,10 @@ const TextInput = forwardRef<TextInputProps, *>((props, forwardedRef) => {
break;
case 'number-pad':
case 'numeric':
type = 'number';
inputMode = 'numeric';
break;
case 'decimal-pad':
inputMode = 'decimal';
break;
case 'phone-pad':
type = 'tel';
@@ -368,6 +372,7 @@ const TextInput = forwardRef<TextInputProps, *>((props, forwardedRef) => {
supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect;
supportedProps.style = style;
supportedProps.type = multiline ? undefined : type;
supportedProps.inputMode = inputMode;
usePlatformMethods(hostRef, supportedProps);