From bcbc04f745f2976f80cc9bf8d2c4581ac2b9db57 Mon Sep 17 00:00:00 2001
From: Patricio Vighi <pvighi@gmail.com>
Date: Tue, 20 Feb 2024 17:50:18 +0000
Subject: [PATCH 1/2] phone validation fix

---
 .../components/mma/identity/settings/SettingsFormSection.tsx   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/components/mma/identity/settings/SettingsFormSection.tsx b/client/components/mma/identity/settings/SettingsFormSection.tsx
index 668a9b0f8..69b3587f9 100644
--- a/client/components/mma/identity/settings/SettingsFormSection.tsx
+++ b/client/components/mma/identity/settings/SettingsFormSection.tsx
@@ -6,7 +6,6 @@ import type { FC } from 'react';
 import { Button } from '../../shared/Buttons';
 import {
 	FormEmailField,
-	FormNumberField,
 	FormSelectField,
 	FormTextField,
 } from '../form/FormField';
@@ -173,7 +172,7 @@ const BaseForm = (props: FormikProps<User> & SettingsFormProps) => {
 					formikProps={props}
 					labelModifier={(o: string) => `+${o}`}
 				/>
-				<FormNumberField
+				<FormTextField
 					name="localNumber"
 					label="Local Number"
 					formikProps={props}

From 4fe39e49da0fd10f4ac8124e1841d29f79431b87 Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphael.kabo@theguardian.com>
Date: Thu, 22 Feb 2024 11:10:54 +0000
Subject: [PATCH 2/2] Switch telephone input to type=tel

---
 client/components/mma/identity/form/FormField.tsx              | 1 +
 .../components/mma/identity/settings/SettingsFormSection.tsx   | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/components/mma/identity/form/FormField.tsx b/client/components/mma/identity/form/FormField.tsx
index 1b87ecf04..433e8f7d0 100644
--- a/client/components/mma/identity/form/FormField.tsx
+++ b/client/components/mma/identity/form/FormField.tsx
@@ -98,3 +98,4 @@ const getInputFieldOfType = (type: string) => {
 export const FormTextField = getInputFieldOfType('text');
 export const FormNumberField = getInputFieldOfType('number');
 export const FormEmailField = getInputFieldOfType('email');
+export const FormTelephoneField = getInputFieldOfType('tel');
diff --git a/client/components/mma/identity/settings/SettingsFormSection.tsx b/client/components/mma/identity/settings/SettingsFormSection.tsx
index 69b3587f9..3ae7b820e 100644
--- a/client/components/mma/identity/settings/SettingsFormSection.tsx
+++ b/client/components/mma/identity/settings/SettingsFormSection.tsx
@@ -7,6 +7,7 @@ import { Button } from '../../shared/Buttons';
 import {
 	FormEmailField,
 	FormSelectField,
+	FormTelephoneField,
 	FormTextField,
 } from '../form/FormField';
 import * as PhoneNumberAPI from '../idapi/phonenumber';
@@ -172,7 +173,7 @@ const BaseForm = (props: FormikProps<User> & SettingsFormProps) => {
 					formikProps={props}
 					labelModifier={(o: string) => `+${o}`}
 				/>
-				<FormTextField
+				<FormTelephoneField
 					name="localNumber"
 					label="Local Number"
 					formikProps={props}