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

Can't disable country selection if input is saved and disabled #129

Open
Katanis opened this issue Feb 8, 2022 · 1 comment
Open

Can't disable country selection if input is saved and disabled #129

Katanis opened this issue Feb 8, 2022 · 1 comment

Comments

@Katanis
Copy link

Katanis commented Feb 8, 2022

Hi,
Using phone number input with react-hook-form, if input is disabled you can still change country code by clicking on flag. How to disable flag selection but still show country flag?
disableDropdown prop works, but it removes country flag.

import MuiPhoneNumber, { MaterialUiPhoneNumberProps } from 'material-ui-phone-number';
import { Controller, ControllerProps, Path, PathValue } from 'react-hook-form';
import { genericMemo } from '../../app/generics';
import { useTranslation } from 'react-i18next';
import { interpolatedTranslation } from '../../app/i18n';
import { Box } from '@material-ui/core';

interface Props<T> {
  name: Path<T>;
  disabled?: boolean;
  control: ControllerProps<T>['control'];
  defaultValue?: PathValue<T, Path<T>>;
  isRequired?: boolean;
}

const PhoneNumberFieldComponent = <T extends Record<string, any>>({
  name,
  control,
  defaultValue,
  disabled = false,
  ...props
}: Props<T> & MaterialUiPhoneNumberProps) => {
  const { t } = useTranslation();
  return (
    <Box display="flex" flex={1} mb={3}>
      <Controller<T>
        name={name}
        control={control}
        defaultValue={defaultValue ?? ('' as any)}
        render={({ field, fieldState: { error } }) => (
          <MuiPhoneNumber
            error={!!error}
            helperText={error?.message && t(...interpolatedTranslation(error.message))}
            disabled={disabled}
            {...field}
            {...props}
          />
        )}
      />
    </Box>
  );
};

export const PhoneNumberField = genericMemo(PhoneNumberFieldComponent);

@PrgrmmrOleg
Copy link

The same problem

Any update?

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

2 participants