Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Strange behavior of field focus #123

Open
Makentosh opened this issue Aug 1, 2024 · 2 comments
Open

Strange behavior of field focus #123

Makentosh opened this issue Aug 1, 2024 · 2 comments

Comments

@Makentosh
Copy link

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
Copy link
Author

bug-field-phone.mp4

@Makentosh
Copy link
Author

Makentosh commented Aug 1, 2024

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}
          />
        );
      }}
    />
  );
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant