fix(usephoneinput): fixed unable to detect country when received valu…

…e on mount
trinhthinh388 · Jan 31, 2024 · 56b77f4 · 56b77f4
1 parent 8f36849
commit 56b77f4
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 6 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.6",
+    "@react-awesome/components": "1.0.7",
     "classnames": "^2.5.1",
     "lucide-react": "^0.315.0",
     "next": "^14.0.4",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @react-awesome/components
 
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies
+  - @react-awesome/phone-input@1.0.6
+
 ## 1.0.6
 
 ### 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.6",
+  "version": "1.0.7",
   "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.0.5",
+    "@react-awesome/phone-input": "1.0.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,13 @@
 # @react-awesome/phone-input
 
+## 1.0.6
+
+### Patch Changes
+
+- Bug fixes:
+
+  - `usePhoneInput` doesn't detect country when received `value` on mount.
+
 ## 1.0.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.0.5",
+  "version": "1.0.6",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/packages/phone-input/src/hooks/usePhoneInput.tsx b/packages/phone-input/src/hooks/usePhoneInput.tsx
@@ -97,7 +97,7 @@ export const usePhoneInput = ({
     }
 
     return {
-      phone: value || '',
+      phone: '',
       country: getInitialCountry(),
     }
   })
@@ -245,12 +245,15 @@ export const usePhoneInput = ({
   React.useEffect(() => {
     if (!value) return
     if (value !== innerValue.phone) {
+      const metadata = generateMetadata(value, innerValue.country)
+      onPhoneChange(undefined, metadata)
       setInnerValue((prev) => ({
         ...prev,
+        country: metadata.country,
         phone: value,
       }))
     }
-  }, [innerValue, onPhoneChange, value])
+  }, [generateMetadata, innerValue, onPhoneChange, value])
 
   return {
     inputEl: inputRef,