fix: fix usePhoneInput national format

trinhthinh388 · Mar 21, 2024 · aba150d · aba150d
1 parent ee5c050
commit aba150d
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 12 deletions.
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -10,7 +10,7 @@
     "clean": "rimraf .turbo && rimraf node_modules && rimraf .next"
   },
   "dependencies": {
-    "@react-awesome/components": "1.0.18",
+    "@react-awesome/components": "1.0.19",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.315.0",

diff --git a/apps/docs/src/pages/docs/phone-input/use-phone-input.mdx b/apps/docs/src/pages/docs/phone-input/use-phone-input.mdx
@@ -113,7 +113,8 @@ export const LocalExample = () => {
       setValue(m);
     },
     mode: 'national',
-    defaultCountry: 'VN'
+    defaultCountry: 'VN',
+    value: value.formattedValue
   });
 
 return (

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @react-awesome/components
 
+## 1.0.19
+
+### Patch Changes
+
+- Updated dependencies
+  - @react-awesome/phone-input@1.1.6
+
 ## 1.0.18
 
 ### Patch Changes

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-awesome/components",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -39,7 +39,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@react-awesome/phone-input": "1.1.5",
+    "@react-awesome/phone-input": "1.1.6",
     "@react-awesome/use-click-outside": "0.0.3",
     "@react-awesome/use-preserve-input-caret-position": "0.0.3",
     "@react-awesome/use-selection-range": "0.0.3",

diff --git a/packages/phone-input/CHANGELOG.md b/packages/phone-input/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @react-awesome/phone-input
 
+## 1.1.6
+
+### Patch Changes
+
+- Fix usePhoneInput national format doesn't format the value.
+
 ## 1.1.5
 
 ### Patch Changes

diff --git a/packages/phone-input/package.json b/packages/phone-input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-awesome/phone-input",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/packages/phone-input/src/hooks/usePhoneInput.spec.tsx b/packages/phone-input/src/hooks/usePhoneInput.spec.tsx
@@ -247,7 +247,7 @@ describe('usePhoneInput', () => {
       })
 
       // Should be treated as VN number +84 123 since country detector has been disabled.
-      expect(input.getAttribute('value')).toBe('123')
+      expect(input.getAttribute('value')).toBe('1 23')
 
       expect(container.querySelector('#VN')).toBeVisible()
     })
@@ -268,7 +268,7 @@ describe('usePhoneInput', () => {
         await user.keyboard('{+},{1},{2},{3}')
       })
 
-      expect(input.getAttribute('value')).toBe('123')
+      expect(input.getAttribute('value')).toBe('1 23')
 
       expect(container.querySelector('#VN')).toBeVisible()
     })
@@ -347,7 +347,7 @@ describe('usePhoneInput', () => {
         await user.keyboard('{+},{1},{2},{3}')
       })
 
-      expect(input.getAttribute('value')).toBe('123')
+      expect(input.getAttribute('value')).toBe('1 23')
 
       expect(container.querySelector('#VN')).toBeVisible()
     })

diff --git a/packages/phone-input/src/hooks/usePhoneInput.tsx b/packages/phone-input/src/hooks/usePhoneInput.tsx
@@ -204,7 +204,20 @@ export const usePhoneInput = ({
       asYouType.current.reset()
       asYouType.current.input(value)
 
-      const formattedValue = formatIncompletePhoneNumber(value, country)
+      const phoneCode =
+        asYouType.current.getCallingCode() || getCountryCallingCode(country)
+      let formattedValue = formatIncompletePhoneNumber(value, country)
+
+      /**
+       * Since input value in national format won't include the country code so we have to manually append it.
+       */
+      if (mode === 'national') {
+        formattedValue = formatIncompletePhoneNumber(
+          `${phoneCode}${value}`,
+          country,
+        )
+        formattedValue = formattedValue.replace(phoneCode, '').trim()
+      }
 
       return {
         isPossible: asYouType.current.isPossible(),
@@ -214,13 +227,12 @@ export const usePhoneInput = ({
             fromCountry: country,
           }) || '',
         country,
-        phoneCode:
-          asYouType.current.getCallingCode() || getCountryCallingCode(country),
+        phoneCode,
         formattedValue,
         isSupported,
       }
     },
-    [defaultCountry, guessCountry, options, supportedCountries],
+    [defaultCountry, guessCountry, mode, options, supportedCountries],
   )
   const setSelectedCountry = React.useCallback(
     (country: CountryCode) => {