-
-
Notifications
You must be signed in to change notification settings - Fork 31.6k
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
[TextField] Mask #2130
Comments
Nice idea +1 |
That would make coding a little bit simpler +1 |
I don't get it. Why is 2) not working?
|
Hi @oliviertassinari, 2) it's working perfectly! Sorry. I saw only the documentation and thought it would only be that way. Why 1) isn't a good idea? |
|
|
Indeed, please add this. I've tried using third-party mask library, and it's a nightmare to integrate something with a TextField. Finally i gave up on this. |
Sould I implement it in #6566 with help of https://github.com/text-mask/text-mask/ or more simple https://github.com/insin/react-maskedinput ? |
@kybarg |
Not sure if this is too late @dobryanskyy or if this is of use to anyone else, but this is how I added the text-mask onto a MUI v1 input. Parent component <Input
classes={{
underline: classes.underline,
}}
inputComponent={OurMaskedInput}
/> OurMaskedInput import React from 'react';
import MaskedInput from 'react-text-mask';
import { withStyles } from 'material-ui/styles';
import detailStyleSheet from './LocationDetailStyles';
const OurMaskedInput = (props) => {
const classes = props.classes;
return (
<div>
<MaskedInput
mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
placeholderChar={'\u2000'}
showMask
className={classes.maskedInput}
/>
</div>
);
};
export default withStyles(detailStyleSheet)(OurMaskedInput); Because we're only replacing the html input element we needed to replicate the styles MUI places via the
Did the trick for my use case. |
@kylem038 This sounds like an excellent idea! Do you want to add a demo into the documentation? This would be a great addition to have https://github.com/text-mask/text-mask. Also, https://github.com/s-yadav/react-number-format seems to be a good alternative. cc @rosskevin |
@kylem038 I used
It worked well, and should work for your input too (assuming you want all the extras |
@oliviertassinari @rosskevin Would love to contribute and PR this. I have to admit, this would be my first contribution to MUI. Is there a place where I can see the preferred format for PR'ing into MUI? |
@kylem038 There is no preferred format. At least, I don't see what you are referring to. Don't miss this CONTRIBUTING.md guide. |
@kylem038 great solution, thanks. |
Hi. I'm trying to implement this (using #2130 (comment) 's example) on material-ui-next and I'm getting the error:
This
I would love to use something like what was initially suggested:
|
@felipenmoura We have an example in the documentation. Don't miss it. |
be happy import MaskedInput from 'react-text-mask'
import TextField from '@mui/material/TextField'
// ...
const Component = () => (
<MaskedInput
mask={/* YOUR MASK */}
render={(innerRef, props) => (
<TextField
{...props}
inputRef={innerRef}
/>
)}
/>
); |
Is there any option to dynamically update the |
Any best solution? |
fullWidth={true}
, why not simply passfullWidth
? Because single props without values returns abool
.Example:
Thanks!
The text was updated successfully, but these errors were encountered: