From 9ed0c407a93e55db6550f0322923546f74fa0e39 Mon Sep 17 00:00:00 2001
From: Richard Lindhout <richardlindhout96@gmail.com>
Date: Thu, 20 Aug 2020 13:07:04 +0200
Subject: [PATCH] [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 #1705
Fix #1438
Fix #1280
Close #1709
---
 .../src/exports/TextInput/__tests__/index-test.js  | 14 +++++++++++++-
 .../src/exports/TextInput/index.js                 |  7 ++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

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 1f3ab24a..3b5dbd32 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(<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"', () => {
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
index 83802792..b0f2cf10 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<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);