aserbin/IDP-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: phone number input optimized

Browse Source
This commit is contained in:
AlexSserb
2025-08-04 10:41:09 +04:00
parent a812e650ce
commit 63e4654502
1 changed files with 2 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/PhoneInput/PhoneInput.tsx
View File

@ -20,14 +20,13 @@ type AdditionalProps = {
type InputProps = Omit< type InputProps = Omit<
PolymorphicComponentProps<typeof IMaskInput, InputBaseProps>, PolymorphicComponentProps<typeof IMaskInput, InputBaseProps>,
"onChange" | "defaultValue" "onChange" | "defaultValue" | "value"
>; >;
export type Props = AdditionalProps & InputProps; export type Props = AdditionalProps & InputProps;
const PhoneInput = ({ const PhoneInput = ({
initialCountryCode = "RU", initialCountryCode = "RU",
value: _value,
onChange: _onChange, onChange: _onChange,
setPhoneMask: _setPhoneMask, setPhoneMask: _setPhoneMask,
...props ...props
@ -41,8 +40,6 @@ const PhoneInput = ({
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const [dropdownWidth, setDropdownWidth] = useState<number>(300); const [dropdownWidth, setDropdownWidth] = useState<number>(300);
const lastNotifiedValue = useRef<string | null>(value ?? "");
const onChange = (numberWithoutCode: string) => { const onChange = (numberWithoutCode: string) => {
setValue(numberWithoutCode); setValue(numberWithoutCode);
_onChange(`+${country.callingCode} ${numberWithoutCode}`); _onChange(`+${country.callingCode} ${numberWithoutCode}`);
@ -57,14 +54,6 @@ const PhoneInput = ({
setPhoneMask(initialData.current.format, country); setPhoneMask(initialData.current.format, country);
}, [initialData.current.format]); }, [initialData.current.format]);
useEffect(() => {
const localValue = value.trim();
if (localValue !== lastNotifiedValue.current) {
lastNotifiedValue.current = localValue;
onChange(localValue);
}
}, [country.code, value]);
const { readOnly, disabled } = props; const { readOnly, disabled } = props;
const leftSectionWidth = 90; const leftSectionWidth = 90;
@ -108,7 +97,7 @@ const PhoneInput = ({
inputMode={"numeric"} inputMode={"numeric"}
mask={mask} mask={mask}
value={value} value={value}
onAccept={value => setValue(value)} onAccept={onChange}
/> />
); );
}; };