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

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

Open
2 tasks done
rswlkr opened this issue Mar 1, 2020 · 4 comments
Open
2 tasks done
Labels
docs Improvements or additions to the documentation package: material-ui Specific to @mui/material ready to take Help wanted. Guidance available. There is a high chance the change will be accepted

Comments

@rswlkr
Copy link

rswlkr commented Mar 1, 2020

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.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.
@rswlkr rswlkr changed the title [DOCS] Using react-number-format does not require custom input implementation [Docs] Using react-number-format does not require custom input implementation Mar 1, 2020
@eps1lon eps1lon added docs Improvements or additions to the documentation new feature New feature or request status: waiting for author Issue with insufficient information labels Mar 1, 2020
@eps1lon
Copy link
Member

eps1lon commented Mar 1, 2020

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

@rswlkr
Copy link
Author

rswlkr commented Mar 1, 2020

          <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

@eps1lon eps1lon removed the status: waiting for author Issue with insufficient information label Mar 1, 2020
@oliviertassinari
Copy link
Member

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
Copy link

bsell93 commented Jan 27, 2022

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.

@samuelsycamore samuelsycamore changed the title [Docs] Using react-number-format does not require custom input implementation [material-ui][docs][Input] Update react-number-format integration demo Nov 28, 2023
@samuelsycamore samuelsycamore added package: material-ui Specific to @mui/material component: input This is the name of the generic UI component, not the React module! and removed new feature New feature or request component: input This is the name of the generic UI component, not the React module! labels Nov 28, 2023
@samuelsycamore samuelsycamore changed the title [material-ui][docs][Input] Update react-number-format integration demo [material-ui][docs][TextField] Update react-number-format integration demo Nov 28, 2023
@samuelsycamore samuelsycamore added the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label Dec 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation package: material-ui Specific to @mui/material ready to take Help wanted. Guidance available. There is a high chance the change will be accepted
Projects
None yet
Development

No branches or pull requests

5 participants