From db355f55936c69ed7949240895d9d06f4284ab44 Mon Sep 17 00:00:00 2001 From: Richard Lindhout Date: Thu, 20 Aug 2020 13:07:04 +0200 Subject: [PATCH 1/6] Update index.js --- packages/react-native-web/src/exports/TextInput/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index 83802792e..f3e6dab7e 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -155,6 +155,7 @@ const TextInput = forwardRef((props, forwardedRef) => { } = props; let type; + let inputType; switch (keyboardType) { case 'email-address': @@ -162,7 +163,7 @@ const TextInput = forwardRef((props, forwardedRef) => { break; case 'number-pad': case 'numeric': - type = 'number'; + inputType = 'number'; break; case 'phone-pad': type = 'tel'; @@ -368,6 +369,7 @@ const TextInput = forwardRef((props, forwardedRef) => { supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect; supportedProps.style = style; supportedProps.type = multiline ? undefined : type; + supportedProps.inputType = inputType; usePlatformMethods(hostRef, supportedProps); From 6d1cae66fe267ddd0a46b39d851c7636d19244a5 Mon Sep 17 00:00:00 2001 From: Richard Lindhout Date: Thu, 20 Aug 2020 13:20:12 +0200 Subject: [PATCH 2/6] Update index-test.js --- .../src/exports/TextInput/__tests__/index-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1f3ab24ad..b0715a54c 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 @@ -168,7 +168,7 @@ describe('components/TextInput', () => { test('value "numeric"', () => { const { container } = render(); const input = findInput(container); - expect(input.type).toEqual('number'); + expect(input.inputType).toEqual('number'); }); test('value "phone-pad"', () => { From 35d576a2d478b9fd70a41769ef5232ec8d3c4e6c Mon Sep 17 00:00:00 2001 From: Richard Lindhout Date: Thu, 20 Aug 2020 13:25:40 +0200 Subject: [PATCH 3/6] Update index.js --- packages/react-native-web/src/exports/TextInput/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index f3e6dab7e..916f20712 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -155,7 +155,7 @@ const TextInput = forwardRef((props, forwardedRef) => { } = props; let type; - let inputType; + let inputMode; switch (keyboardType) { case 'email-address': @@ -163,7 +163,7 @@ const TextInput = forwardRef((props, forwardedRef) => { break; case 'number-pad': case 'numeric': - inputType = 'number'; + inputMode = 'number'; break; case 'phone-pad': type = 'tel'; @@ -369,7 +369,7 @@ const TextInput = forwardRef((props, forwardedRef) => { supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect; supportedProps.style = style; supportedProps.type = multiline ? undefined : type; - supportedProps.inputType = inputType; + supportedProps.inputMode = inputMode; usePlatformMethods(hostRef, supportedProps); From ff491e7d48da426c82136fb86f099d2cd3ff33d2 Mon Sep 17 00:00:00 2001 From: Richard Lindhout Date: Thu, 20 Aug 2020 13:29:44 +0200 Subject: [PATCH 4/6] Add support for decimal input --- packages/react-native-web/src/exports/TextInput/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index 916f20712..e99a30062 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -163,7 +163,11 @@ const TextInput = forwardRef((props, forwardedRef) => { break; case 'number-pad': case 'numeric': - inputMode = 'number'; + inputMode = 'numeric'; + break; + case 'decimal-pad': + case 'decimal': + inputMode = 'decimal'; break; case 'phone-pad': type = 'tel'; From 0352875ebe37617fec998a675c1d92ef9a684cff Mon Sep 17 00:00:00 2001 From: Richard Lindhout Date: Thu, 20 Aug 2020 13:30:50 +0200 Subject: [PATCH 5/6] Update index.js --- packages/react-native-web/src/exports/TextInput/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js index e99a30062..b0f2cf101 100644 --- a/packages/react-native-web/src/exports/TextInput/index.js +++ b/packages/react-native-web/src/exports/TextInput/index.js @@ -166,7 +166,6 @@ const TextInput = forwardRef((props, forwardedRef) => { inputMode = 'numeric'; break; case 'decimal-pad': - case 'decimal': inputMode = 'decimal'; break; case 'phone-pad': From 757fc60abd65a715dff5a7f58755287691332091 Mon Sep 17 00:00:00 2001 From: Richard Lindhout Date: Thu, 20 Aug 2020 13:32:04 +0200 Subject: [PATCH 6/6] Update index-test.js --- .../src/exports/TextInput/__tests__/index-test.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) 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 b0715a54c..59e5cdcb8 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 @@ -165,10 +165,22 @@ describe('components/TextInput', () => { expect(input.type).toEqual('email'); }); + test('value "decimal-pad"', () => { + const { container } = render(); + const input = findInput(container); + expect(input.inputMode).toEqual('decimal'); + }); + + test('value "number-pad"', () => { + const { container } = render(); + const input = findInput(container); + expect(input.inputMode).toEqual('numeric'); + }); + test('value "numeric"', () => { const { container } = render(); const input = findInput(container); - expect(input.inputType).toEqual('number'); + expect(input.inputMode).toEqual('numeric'); }); test('value "phone-pad"', () => {