mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.38k stars 32.14k forks source link

[material-ui][docs][TextField] Update react-number-format integration demo #19922

Open rswlkr opened 4 years ago

rswlkr commented 4 years ago

react-number-format has a customInput prop that allows passing materialui components. A custom implementation of the input component is therefore not required and the docs/examples should be updated to reflect this.

eps1lon commented 4 years ago

Could you include an example that uses customInput over our current solution?

rswlkr commented 4 years ago
          <NumberFormat
            customInput={TextField}
            thousandSeparator={true}
            prefix={'£'}
            id='minValue'
            label='Minimum Value'
            onChange={handleChange}
            value={minValue}
            className={classes.formControl}
            inputProps={{
              name: 'minValue'
            }}
          />

https://github.com/s-yadav/react-number-format#custom-inputs

oliviertassinari commented 4 years ago

I wonder about the best option we have here. In which order should we compose the two components? NumberFormat > TextField as in the above example requires less code. I wonder about the implication it can have with the MaskedInput example. I also wonder about the forms libraries integrations.

bsell93 commented 2 years ago

The codebase I'm working on was having issues with using the recommended way in the MUI docs. Ended up using the above suggested method with NumberFormat and customInput={TextField} prop and that fixed the issues we were having.

Unfortunately we were not able to reproduce the issue in a codesandbox with our setup, so hard saying what it was about the MUI-suggested way but something was definitely messing it up from within the TextField component.