Skip to content

Commit c821fde

Browse files
ArtyomVancyanArtyomVancyan
committed
Sync last changes
1 parent cc9f85d commit c821fde

File tree

3 files changed

+74
-47
lines changed

3 files changed

+74
-47
lines changed

‎development/src/ant-phone/index.tsx

+16-2
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,11 @@ const PhoneInput = forwardRef(({
4848
onChange: handleChange = () => null,
4949
onKeyDown: handleKeyDown = () => null,
5050
...antInputProps
51-
}: PhoneInputProps, ref: any) => {
51+
}: PhoneInputProps, forwardedRef: any) => {
5252
const formInstance = useFormInstance();
5353
const formContext = useContext(FormContext);
54+
const inputRef = useRef<any>(null);
55+
const selectedRef = useRef<boolean>(false);
5456
const initiatedRef = useRef<boolean>(false);
5557
const [query, setQuery] = useState<string>("");
5658
const [minWidth, setMinWidth] = useState<number>(0);
@@ -102,7 +104,8 @@ const PhoneInput = forwardRef(({
102104
}, [handleKeyDown, onKeyDownMaskHandler])
103105

104106
const onChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
105-
const formattedNumber = getFormattedNumber(event.target.value, pattern);
107+
const formattedNumber = selectedRef.current ? event.target.value : getFormattedNumber(event.target.value, pattern);
108+
selectedRef.current = false;
106109
const phoneMetadata = parsePhoneNumber(formattedNumber, countriesList);
107110
setCountryCode(phoneMetadata.isoCode as any);
108111
setValue(formattedNumber);
@@ -119,6 +122,13 @@ const PhoneInput = forwardRef(({
119122
handleMount(value);
120123
}, [handleMount, setFieldValue])
121124

125+
const ref = useCallback((node: any) => {
126+
[forwardedRef, inputRef].forEach((ref) => {
127+
if (typeof ref === "function") ref(node);
128+
else if (ref != null) ref.current = node;
129+
})
130+
}, [forwardedRef])
131+
122132
useEffect(() => {
123133
if (initiatedRef.current) return;
124134
initiatedRef.current = true;
@@ -147,6 +157,10 @@ const PhoneInput = forwardRef(({
147157
setFieldValue({...phoneMetadata, valid: (strict: boolean) => checkValidity(phoneMetadata, strict)});
148158
setCountryCode(selectedCountryCode);
149159
setValue(formattedNumber);
160+
selectedRef.current = true;
161+
const nativeInputValueSetter = (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value") as any).set;
162+
nativeInputValueSetter.call(inputRef.current.input, formattedNumber);
163+
inputRef.current.input.dispatchEvent(new Event("change", {bubbles: true}));
150164
}}
151165
optionLabelProp="label"
152166
dropdownStyle={{minWidth}}

‎development/src/mui-phone/index.tsx

+57-44
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,11 @@ const PhoneInput = forwardRef(({
3636
onChange: handleChange = () => null,
3737
onKeyDown: handleKeyDown = () => null,
3838
...muiInputProps
39-
}: PhoneInputProps, ref: any) => {
39+
}: PhoneInputProps, forwardedRef: any) => {
4040
searchVariant = searchVariant || variant;
41+
const inputRef = useRef<any>(null);
4142
const searchRef = useRef<boolean>(false);
43+
const selectedRef = useRef<boolean>(false);
4244
const initiatedRef = useRef<boolean>(false);
4345
const [query, setQuery] = useState<string>("");
4446
const [open, setOpen] = useState<boolean>(false);
@@ -78,7 +80,8 @@ const PhoneInput = forwardRef(({
7880
}, [handleKeyDown, onKeyDownMaskHandler])
7981

8082
const onChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
81-
const formattedNumber = getFormattedNumber(event.target.value, pattern);
83+
const formattedNumber = selectedRef.current ? event.target.value : getFormattedNumber(event.target.value, pattern);
84+
selectedRef.current = false;
8285
const phoneMetadata = parsePhoneNumber(formattedNumber, countriesList);
8386
setCountryCode(phoneMetadata.isoCode as any);
8487
setValue(formattedNumber);
@@ -94,6 +97,13 @@ const PhoneInput = forwardRef(({
9497
handleMount(value);
9598
}, [handleMount])
9699

100+
const ref = useCallback((node: any) => {
101+
[forwardedRef, inputRef].forEach((ref) => {
102+
if (typeof ref === "function") ref(node);
103+
else if (ref != null) ref.current = node;
104+
})
105+
}, [forwardedRef])
106+
97107
useEffect(() => {
98108
if (initiatedRef.current) return;
99109
initiatedRef.current = true;
@@ -111,48 +121,51 @@ const PhoneInput = forwardRef(({
111121
return (
112122
<div className="mui-phone-input-wrapper"
113123
ref={node => setMaxWidth(node?.offsetWidth || 0)}>
114-
<Select
115-
open={open}
116-
variant={variant}
117-
value={selectValue}
118-
onClose={() => setOpen(searchRef.current)}
119-
style={{position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1}}
120-
>
121-
<div className="mui-phone-input-search-wrapper" onKeyDown={(e: any) => e.stopPropagation()}>
122-
{enableSearch && (
123-
<TextField
124-
type="search"
125-
value={query}
126-
variant={searchVariant}
127-
className="mui-phone-input-search"
128-
onChange={(e: any) => setQuery(e.target.value)}
129-
onBlur={() => searchRef.current = false}
130-
onFocus={() => searchRef.current = true}
131-
/>
132-
)}
133-
{countriesList.map(([iso, name, dial, mask]) => (
134-
<MenuItem
135-
disableRipple
136-
key={iso + mask}
137-
value={iso + dial}
138-
style={{maxWidth}}
139-
selected={selectValue === iso + dial}
140-
onClick={() => {
141-
const selectedOption = iso + dial;
142-
if (selectValue === selectedOption) return;
143-
setCountryCode(selectedOption.slice(0, 2));
144-
setValue(getFormattedNumber(mask, mask));
145-
}}
146-
children={<div className="mui-phone-input-select-item">
147-
<div className={`flag ${iso}`}/>
148-
<div className="label">
149-
{name}&nbsp;{displayFormat(mask)}
150-
</div>
151-
</div>}
152-
/>
153-
))}
154-
</div>
155-
</Select>
124+
{!disableDropdown && (
125+
<Select
126+
open={open}
127+
variant={variant}
128+
value={selectValue}
129+
onClose={() => setOpen(searchRef.current)}
130+
style={{position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1}}
131+
>
132+
<div className="mui-phone-input-search-wrapper" onKeyDown={(e: any) => e.stopPropagation()}>
133+
{enableSearch && (
134+
<TextField
135+
type="search"
136+
value={query}
137+
variant={searchVariant}
138+
placeholder={searchPlaceholder}
139+
className="mui-phone-input-search"
140+
onChange={(e: any) => setQuery(e.target.value)}
141+
onBlur={() => searchRef.current = false}
142+
onFocus={() => searchRef.current = true}
143+
/>
144+
)}
145+
{countriesList.length ? countriesList.map(([iso, name, dial, mask]) => (
146+
<MenuItem
147+
disableRipple
148+
key={iso + mask}
149+
value={iso + dial}
150+
style={{maxWidth}}
151+
selected={selectValue === iso + dial}
152+
onClick={() => {
153+
const selectedOption = iso + dial;
154+
if (selectValue === selectedOption) return;
155+
setCountryCode(selectedOption.slice(0, 2));
156+
setValue(getFormattedNumber(mask, mask));
157+
}}
158+
children={<div className="mui-phone-input-select-item">
159+
<div className={`flag ${iso}`}/>
160+
<div className="label">
161+
{name}&nbsp;{displayFormat(mask)}
162+
</div>
163+
</div>}
164+
/>
165+
)) : <MenuItem disabled>{searchNotFound}</MenuItem>}
166+
</div>
167+
</Select>
168+
)}
156169
<TextField
157170
ref={ref}
158171
type="tel"

‎src/metadata/countries.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"dz",
1616
"Algeria",
1717
"213",
18-
"+213 (..) ... ...."
18+
"+213 (...) ... ..."
1919
],
2020
[
2121
"as",

0 commit comments

Comments
 (0)