Fix country flag disappearing issue (GH-109)

Author: ArtyomVancyan

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.9",
+  "version": "0.3.10",
   "name": "antd-phone-input",
   "description": "Advanced, highly customizable phone input component for Ant Design.",
   "keywords": [
@@ -78,7 +78,7 @@
     "react": ">=16"
   },
   "dependencies": {
-    "react-phone-hooks": "^0.1.6"
+    "react-phone-hooks": "^0.1.11"
   },
   "devDependencies": {
     "@testing-library/react": "^14.0.0",

src/index.tsx

@@ -133,6 +133,7 @@ const PhoneInput = forwardRef(({
         const phoneMetadata = parsePhoneNumber(formattedNumber, countriesList);
         setCountryCode(phoneMetadata.isoCode as any);
         setValue(formattedNumber);
+        setQuery("");
         handleChange({...phoneMetadata, valid: (strict: boolean) => checkValidity(phoneMetadata, strict)}, event);
     }, [countriesList, handleChange, pattern, setValue])
 
@@ -183,6 +184,18 @@ const PhoneInput = forwardRef(({
         setValue(formattedNumber);
     }, [countriesList, metadata, onMount, pattern, setValue, value])
 
+    const suffixIcon = useMemo(() => {
+        return enableArrow && (
+            <span role="img" className="anticon" style={{paddingLeft: 8}}>
+                <svg className="icon" viewBox="0 0 1024 1024"
+                     focusable="false" fill="currentColor" width="16" height="18">
+                    <path
+                        d="M848 368a48 48 0 0 0-81.312-34.544l-0.016-0.016-254.784 254.784-251.488-251.488a48 48 0 1 0-71.04 64.464l-0.128 0.128 288 288 0.016-0.016a47.84 47.84 0 0 0 34.544 14.688h0.224a47.84 47.84 0 0 0 34.544-14.688l0.016 0.016 288-288-0.016-0.016c8.32-8.624 13.44-20.368 13.44-33.312z"/>
+                </svg>
+            </span>
+        );
+    }, [enableArrow])
+
     const countriesSelect = useMemo(() => (
         <Select
             suffixIcon={null}
@@ -206,7 +219,6 @@ const PhoneInput = forwardRef(({
             }}
             optionLabelProp="label"
             dropdownStyle={{minWidth}}
-            notFoundContent={searchNotFound}
             onDropdownVisibleChange={onDropdownVisibleChange}
             dropdownRender={(menu) => (
                 <div className={`${prefixCls}-phone-input-search-wrapper`}>
@@ -218,10 +230,22 @@ const PhoneInput = forwardRef(({
                             onInput={({target}: any) => setQuery(target.value)}
                         />
                     )}
-                    {menu}
+                    {countriesList.length ? menu : (
+                        <div className="ant-select-item-empty">{searchNotFound}</div>
+                    )}
                 </div>
             )}
         >
+            <Select.Option
+                children={null}
+                value={selectValue}
+                style={{display: "none"}}
+                key={`${countryCode}_default`}
+                label={<>
+                    <div className={`flag ${countryCode}`}/>
+                    {suffixIcon}
+                </>}
+            />
             {countriesList.map(([iso, name, dial, pattern]) => {
                 const mask = disableParentheses ? pattern.replace(/[()]/g, "") : pattern;
                 return (
@@ -230,15 +254,7 @@ const PhoneInput = forwardRef(({
                         key={`${iso}_${mask}`}
                         label={<>
                             <div className={`flag ${iso}`}/>
-                            {enableArrow && (
-                                <span role="img" className="anticon" style={{paddingLeft: 8}}>
-                                    <svg className="icon" viewBox="0 0 1024 1024"
-                                         focusable="false" fill="currentColor" width="16" height="18">
-                                        <path
-                                            d="M848 368a48 48 0 0 0-81.312-34.544l-0.016-0.016-254.784 254.784-251.488-251.488a48 48 0 1 0-71.04 64.464l-0.128 0.128 288 288 0.016-0.016a47.84 47.84 0 0 0 34.544 14.688h0.224a47.84 47.84 0 0 0 34.544-14.688l0.016 0.016 288-288-0.016-0.016c8.32-8.624 13.44-20.368 13.44-33.312z"/>
-                                    </svg>
-                                </span>
-                            )}
+                            {suffixIcon}
                         </>}
                         children={<div className={`${prefixCls}-phone-input-select-item`}>
                             <div className={`flag ${iso}`}/>
@@ -248,7 +264,7 @@ const PhoneInput = forwardRef(({
                 )
             })}
         </Select>
-    ), [selectValue, query, enableArrow, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
+    ), [selectValue, suffixIcon, countryCode, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countries, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
 
     return (
         <div className={`${prefixCls}-phone-input-wrapper`}

tests/antd.test.tsx

@@ -140,7 +140,7 @@ describe("Checking the basic rendering and functionality", () => {
                 form.setFieldValue("phone", {
                     countryCode: 48,
                     areaCode: "111",
-                    phoneNumber: "1111111",
+                    phoneNumber: "111111",
                     isoCode: "pl"
                 });
             }
@@ -182,7 +182,7 @@ describe("Checking the basic rendering and functionality", () => {
             await new Promise(r => setTimeout(r, 100));
         })
         assert(!inputHasError(form)); // valid
-        assert(input.getAttribute("value") === "+48 (111) 111 1111");
+        assert(input.getAttribute("value") === "+48 (111) 111 111");
     })
 
     it("Checking validation with casual form actions", async () => {

tsconfig.json

@@ -3,7 +3,6 @@
     "noImplicitAny": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noImplicitUseStrict": true,
     "strictNullChecks": true,
     "module": "esnext",
     "moduleResolution": "node",