material-ui-currency-textfield

material-ui-currency-textfield copied to clipboard

Updated packages and imports so that it can be used with the newest version of Material UI. Also removed withStyles in favor of using style attribute for text align as per MUI v5 upgrade.

I've a question: why do u use "style" instead of sx?

Good question! The textAlign has to be attributed to the base input element via style to actually align the text within the input field. The base input DOM element doesn't know what sx does because it's not a w3 attribute. The sx attribute is a MUI concept and only works on the MUI high order component (ie- TextField and Input with a capital I) and I've tried it on both MUI components, but it does not appear to propagate down to the actual input (with a lowercase i) element so the text never aligns with sx.

I think that's wierd since sx is recognized by the TextField component. To target the input component directly you should target the MUI's css class, something like:

     sx={{
          "& .MuiInput-input": {
            textAlign: this.props.textAlign || "right",
          },
     }}

Also, if u can, can u migrate the example directory to use mui5? Thanks c:

Ah, I was just thowing textAlign in the sx attribute instead of using the class name. That's why it wasn't working. I've committed the change and updated the example project.

Thanks! And now we wait for the merge approval

Is there anything I can do to help get this merged?

I don't think there's anything we can do other than bother @merlos or @sureshsevarthi to review and merge the changes

@merlos @sureshsevarthi please 🥺🙏

please I'm waiting for it too. 🙏🏻

I neeeeeed this !!

Any help needed to merge this issue? MUI v5 really needs it, and looks like a simple merge.

This PR is 8 months old, and would allow me to leverage this package in my project. Anything the community can do to help get this merged?

can i use your version? @alext9586

@GuilhermeGuiuler Yes, absolutely, go for it

@alext9586 how could i install this version in my project?

@GuilhermeGuiuler In my fork, go to src/components/CurrencyTextField/CurrencyTextField.js and copy that file into the components folder of your project and use it like any component. Then import any of the missing dependencies from NPM (I believe "autonumeric" is the only one you'd need).

Hi @alext9586 unfortunately this does not seem to work with the latest versions of MaterialUI. I have the following dependencies:

    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.10",
    "autonumeric": "^4.10.0",
    "react": "18.2.0",
    "tss-react": "^4.9.2",

And when adding the modified CurrencyTextField to my components folder i get the following error when using it:

TypeError: Cannot read properties of undefined (reading 'muiName')

It only occurs when adding the CurrencyTextField component so it must be something in the component but i can't seem to figure it out. Would you like to take a look at it?

Note; modifying the inputs from this:

import { TextField, InputAdornment } from "@mui/material"

to this:

import TextField from "@mui/material/TextField" import InputAdornment from "@mui/material/InputAdornment"

did not help.

@gvdhoven Sorry I can't help with this issue. I'm not sure what would have changed in the latest version of MUI, but I know it's still working with MUI v5.13.5 in my project.