Skip to content

Commit d665a39

Browse files
RichardLindhoutnecolas
authored andcommitted
[fix] TextInput keyboardType for 'numeric' and 'decimal'
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 necolas#1705 Fix necolas#1438 Fix necolas#1280 Close necolas#1709
1 parent 1594f4a commit d665a39

2 files changed

Lines changed: 19 additions & 2 deletions

File tree

src/exports/TextInput/__tests__/index-test.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,10 +165,22 @@ describe('components/TextInput', () => {
165165
expect(input.type).toEqual('email');
166166
});
167167

168+
test('value "decimal-pad"', () => {
169+
const { container } = render(<TextInput keyboardType="decimal-pad" />);
170+
const input = findInput(container);
171+
expect(input.inputMode).toEqual('decimal');
172+
});
173+
174+
test('value "number-pad"', () => {
175+
const { container } = render(<TextInput keyboardType="number-pad" />);
176+
const input = findInput(container);
177+
expect(input.inputMode).toEqual('numeric');
178+
});
179+
168180
test('value "numeric"', () => {
169181
const { container } = render(<TextInput keyboardType="numeric" />);
170182
const input = findInput(container);
171-
expect(input.type).toEqual('number');
183+
expect(input.inputMode).toEqual('numeric');
172184
});
173185

174186
test('value "phone-pad"', () => {

src/exports/TextInput/index.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,14 +155,18 @@ const TextInput = forwardRef<TextInputProps, *>((props, forwardedRef) => {
155155
} = props;
156156

157157
let type;
158+
let inputMode;
158159

159160
switch (keyboardType) {
160161
case 'email-address':
161162
type = 'email';
162163
break;
163164
case 'number-pad':
164165
case 'numeric':
165-
type = 'number';
166+
inputMode = 'numeric';
167+
break;
168+
case 'decimal-pad':
169+
inputMode = 'decimal';
166170
break;
167171
case 'phone-pad':
168172
type = 'tel';
@@ -368,6 +372,7 @@ const TextInput = forwardRef<TextInputProps, *>((props, forwardedRef) => {
368372
supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect;
369373
supportedProps.style = style;
370374
supportedProps.type = multiline ? undefined : type;
375+
supportedProps.inputMode = inputMode;
371376

372377
usePlatformMethods(hostRef, supportedProps);
373378

0 commit comments

Comments
 (0)