Fix input value on select (GH-62)

typesnippet · Dec 6, 2023 · d16b18d · d16b18d
2 parents 5e71f9a + 9e07e9f
commit d16b18d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.3.2",
+  "version": "0.3.3",
   "name": "antd-phone-input",
   "description": "Advanced, highly customizable phone input component for Ant Design.",
   "keywords": [

diff --git a/src/index.tsx b/src/index.tsx
@@ -215,7 +215,8 @@ const PhoneInput = ({
 			suffixIcon={null}
 			value={selectValue}
 			open={disableDropdown ? false : undefined}
-			onSelect={(selectedOption, {key: mask}) => {
+			onSelect={(selectedOption, {key}) => {
+				const [_, mask] = key.split("_");
 				if (selectValue === selectedOption) return;
 				const selectedCountryCode = selectedOption.slice(0, 2);
 				const formattedNumber = displayFormat(cleanInput(mask, mask).join(""));
@@ -241,8 +242,8 @@ const PhoneInput = ({
 		>
 			{countriesList.map(([iso, name, dial, mask]) => (
 				<Select.Option
-					key={iso + mask}
 					value={iso + dial}
+					key={`${iso}_${mask}`}
 					label={<div className={`flag ${iso}`}/>}
 					children={<div className="ant-phone-input-select-item">
 						<div className={`flag ${iso}`}/>