Material UI Field disappearing

[patrickjmeurer]

Hello guys! I'm using the MaterialUI Lib, with React Hook Form and FormMask, but my input is disappearing. This is how i'm using it:

Form page:

const schema = yup
   .object({
     name: yup.string().required('Você precisa preencher esse campo'),
     price: yup.number().positive().integer().required('Você precisa preencher esse campo'),
   })
   .required();

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<AddProductFormDataDto>({
  resolver: yupResolver(schema),
});
const registerWithMask = useHookFormMask(register);

<TextField label="Nome:" error={errors.name} disabled={loading} fullWidth {...register('name')} />
<TextField
  label="Preço:"
  error={errors.price}
  disabled={loading}
  fullWidth
  {...registerWithMask('price', 'brl-currency', {
    rightAlign: false,
    autoUnmask: true,
    unmaskAsNumber: true,
  })}
/>

TextField component:

import { TextField as MaterialTextField, TextFieldProps as MaterialTextFieldProps } from '@mui/material';
import { forwardRef } from 'react';
import { FieldError } from 'react-hook-form';

type TextFieldProps = Omit<MaterialTextFieldProps, 'error'> & {
  error?: FieldError;
};

const TextField = forwardRef<HTMLInputElement, TextFieldProps>(({ error, ...rest }, ref) => (
  <MaterialTextField error={!!error} helperText={error ? error.message : null} {...rest} ref={ref} />
));

export default TextField;

The result is the "Nome" field normaly, but the "price" field is gone :/

I'm doing something wrong? Didn't work with any other type of mask. Thanks for any help!

[regivaldo]

@patrickjmeurer I have the same problem. Did you manage to solve it?

[patrickjmeurer]

@patrickjmeurer I have the same problem. Did you manage to solve it?

No, sorry :/

I'm still waiting for help on this.

[eduardoborges]

Hey guys, I’m going to work on this bug this weekend, I promise 🥹.

(é noiz)

[regivaldo]

Thank you Eduardo.

(tamo junto)

[patrickjmeurer]

Thanks so much, @eduardoborges.

(valeu demais xD )

[regivaldo]

@eduardoborges Do you have a news?
(tem alguma novidade?)

[patrickjmeurer]

@eduardoborges
I found the problema and it is with MaterialUi Fields. The 'input' in inside of various divs, like the example bellow.

Submitted the PR #95 to solve this problem with a simple verification, something temporary, but solves the problem.

Mui TextInput generated HTML:

<div class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root">
  <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1pqivtv-MuiFormLabel-root-MuiInputLabel-root" data-shrink="false" for=":r1:" id=":r1:-label">CPF:</label>
  <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-19bjxwv-MuiInputBase-root-MuiOutlinedInput-root">
    <input aria-invalid="false" id=":r1:" name="socialNumber" type="text" class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input" value="" inputmode="text">
    <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline">
      <legend class="css-yjsfm1"><span>CPF:</span></legend>
    </fieldset>
  </div>
</div>