CODEWITHSUNDEEP
reactjsmaterial-uiinput-mask
Alex Alan Nunes
Alex Alan Nunes

Reputation: 194

How fix input label of OutlinedInput

I'm playing with material ui and build a project and I needed make a TextField with mask with react-imask:

https://mui.com/en/material-ui/react-text-field/#integration-with-3rd-party-input-libraries

But I tried with OutlinedInput but the label crashes:

<FormControl variant="standard">
        <InputLabel htmlFor="formatted-text-mask-input">react-imask</InputLabel>
        <OutlinedInput
          value={values.textmask}
          onChange={handleChange}
          name="textmask"
          id="formatted-text-mask-input"
          inputComponent={TextMaskCustom as any}
        />
      </FormControl>

Empty

outlinedInput empty

Filled

enter image description here

Codesandbox box

https://codesandbox.io/s/problem-with-3rd-party-input-libraries-cygxss?file=/demo.tsx

Codesandbox result link: https://cygxss.csb.app/

Upvotes: 1

Views: 1227

Answers (1)

Jacob Smit
Jacob Smit

Reputation: 2379

Is there any reason you don't just use a TextField with variant set to "outlined"?

The MUI example is just showing different methods of using their components and the FormControl composition is done in greater complexity within TextField.

Solution

<TextField
    label="react-imask"
    id="formatted-text-mask-input"
    name="textmask"
    value={values.textmask}
    onChange={handleChange}
    InputProps={{
        inputComponent: TextMaskCustom as any
    }}
/>

Brief Look at Form Control

It appears as though you have an OutlinedInput but are telling the FormControl it is "standard", fixing this puts the label in the right spot, but it does not properly break the border of the fieldset as intended.

If you need to manually control the composition of the individual parts (FormControl, InputLabel, OutlinedInput, etc) you can see how MUI compose TextField in GitHub.

Upvotes: 1

Related Questions