CODEWITHSUNDEEP
javascriptreactjsmaterial-uifrontendtext-mask
Konstantink1
Konstantink1

Reputation: 635

MaskedInput text is not correctly displayed when it received through the props

I have a a Material UI OutlinedInput on top of which I'm using MaskedInputfrom react-text-mask, when I originally put text into it and element is not in focus, the inputted text displays correctly, however when I close down the Dialog window with this component and reopen there's some strange behavior with text overplapping over placeholder text.

That looks like this:

overlapped image

When I originally input text:

originally inputted text image

Here's my code for this component:

const SERIES_MASK = [/\d/, /\d/, " ", /\d/, /\d/];

const useStyles = makeStyles({
  inputLabel: {
   margin: "-8px 0 0 14px",
  },
});

const SeriesMask: FC<{}> = (props) => <MaskedInput {...props} mask={SERIES_MASK} />;

export const DocumentSeriesField: FC<{
   name: string;
   value: string;
   label: string;
   error?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
   }> = ({ name, value, label, error, onChange, onBlur }) => {
      const classes = useStyles();
      const id = useMemo(() => randomId("series"), []);

      return (
       <FormControl>
         <InputLabel htmlFor={id} error={Boolean(error)} classes={{ root: classes.inputLabel }}>
          {label}
         </InputLabel>
         <OutlinedInput id={id} name={name} value={value} label={label} inputComponent={SeriesMask} error={Boolean(error)} onChange={onChange} onBlur={onBlur} />
         <FormHelperText error={Boolean(error)}>{error}</FormHelperText>
       </FormControl>
    );
};

Could you please tell me what could be a possible issue here and how could it be fixed?

Upvotes: 0

Views: 765

Answers (1)

Mic Fung
Mic Fung

Reputation: 5692

I think you are missing reference of the Outlined Input in MaskedInput

Try to pass inputRef to MaskedInput, the label should be able to find the field is filled and go back up to the border instead of overlaying.

SeriesMask

interface SeriesMaskRefProps {
  inputRef: (ref: HTMLInputElement | null) => void;
} 

const SeriesMask: FC<{}> = (props: InputBaseComponentProps) => (
  <MaskedInput
    {...props}
    ref={(ref: any) => {
      (props as SeriesMaskRefProps).inputRef(ref ? ref.inputElement : null);
    }} // pass the ref to allow input label to connect with maaksed input
    mask={SERIES_MASK}
  />
);

Upvotes: 1

Related Questions