justdvl / material-ui-phone-number-2

Fork of material-ui-phone-number
MIT License
10 stars 9 forks source link

Strange behavior of field focus #123

Open Makentosh opened 1 month ago

Makentosh commented 1 month ago

If i have two field from page and one is phone number, after focus phone number and leave page, a go back to page and focus other field (not phone), it is not focus but focus is from phone field, i dont understand this befavior, can you help me ?

Makentosh commented 1 month ago

https://github.com/user-attachments/assets/b593fe3b-87c4-4393-bd9f-f10645419829

Makentosh commented 1 month ago

here is my code

const FormPhoneWithFlagsField = ({ name, rules, variant }) => {
  const { control } = useFormContext();
  const { t } = useTranslation();

  return (
    <Controller
      name={name}
      control={control}
      defaultValue={''}
      render={({ field: { onChange, onBlur, ref, ...field }, fieldState: { invalid, error } }) => {
        return (
          <MuiPhoneNumber
            {...field}
            onBlur={onBlur}
            variant={variant || 'outlined'}
            onChange={(value, countryData) => {
              onChange(String(value.replace(/\D+/g, '')));
            }}
            autoFocus={false}
            value={field?.value}
            error={!!invalid}
            defaultCountry={'ua'}
            helperText={t(error?.message) || ''}
            onlyCountries={['ua']}
            autoFormat
            fullWidth
            inputProps={{
              ref: ref,
            }}
            countryCodeEditable={true}
          />
        );
      }}
    />
  );
};