fix(settings): Phone number input not working in non-Firefox browsers

Because:

* Typing in phone number input was not working in browsers other than Firefox

This commit:

* use react-hook-form setValue to update input value with formatted phone number

Closes #FXA-11163

Author: vpomerleau

packages/fxa-settings/src/components/FormPhoneNumber/index.tsx

@@ -32,7 +32,7 @@ const FormPhoneNumber = ({
   gleanDataAttrs,
 }: FormPhoneNumberProps) => {
   const [hasErrors, setHasErrors] = React.useState(false);
-  const { control, formState, handleSubmit, register } =
+  const { control, formState, handleSubmit, register, setValue } =
     useForm<InputPhoneNumberData>({
       mode: 'onChange',
       criteriaMode: 'all',
@@ -78,7 +78,7 @@ const FormPhoneNumber = ({
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <InputPhoneNumber {...{ hasErrors, register, errorBannerId }} />
+      <InputPhoneNumber {...{ hasErrors, register, setValue, errorBannerId }} />
 
       {infoBannerContent && !infoBannerLink && (
         <Banner

packages/fxa-settings/src/components/InputPhoneNumber/index.tsx

@@ -20,6 +20,7 @@ export type InputPhoneNumberProps = {
   countries?: Country[];
   hasErrors?: boolean;
   register: UseFormMethods['register'];
+  setValue: UseFormMethods['setValue'];
   errorBannerId?: string;
 };
 
@@ -56,6 +57,7 @@ const InputPhoneNumber = ({
   countries = defaultCountries,
   hasErrors = false,
   register,
+  setValue,
   errorBannerId,
 }: InputPhoneNumberProps) => {
   const ftlMsgResolver = useFtlMsgResolver();
@@ -67,7 +69,6 @@ const InputPhoneNumber = ({
     localizedCountries.find((country) => country.id === 1) ||
     localizedCountries[0];
   const [selectedCountry, setSelectedCountry] = useState(defaultCountry);
-  const [formattedPhoneNumber, setFormattedPhoneNumber] = useState('');
 
   const localizedLabel = ftlMsgResolver.getMsg(
     'input-phone-number-enter-number',
@@ -86,7 +87,7 @@ const InputPhoneNumber = ({
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value;
     const formattedValue = formatPhoneNumber(inputValue);
-    setFormattedPhoneNumber(formattedValue);
+    setValue('phoneNumber', formattedValue);
   };
 
   // Format the phone number as the user types - for easier review by the user
@@ -168,7 +169,6 @@ const InputPhoneNumber = ({
           pattern: selectedCountry.validationPattern,
         })}
         {...{ hasErrors }}
-        value={formattedPhoneNumber}
         onChange={handleInputChange}
         aria-describedby={errorBannerId}
       />

packages/fxa-settings/src/components/InputPhoneNumber/mocks.tsx

@@ -45,7 +45,7 @@ export const extendedCountryOptions = [
 ];
 
 export const Subject = ({ countries = defaultCountries }) => {
-  const { register } = useForm<InputPhoneNumberData>({
+  const { register, setValue } = useForm<InputPhoneNumberData>({
     mode: 'onChange',
     criteriaMode: 'all',
     defaultValues: {
@@ -56,7 +56,7 @@ export const Subject = ({ countries = defaultCountries }) => {
 
   return (
     <AppLayout>
-      <InputPhoneNumber {...{ register, countries }} />
+      <InputPhoneNumber {...{ register, setValue, countries }} />
     </AppLayout>
   );
 };