question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

  1. There is an idea for apply masks in textfields?
  2. Why I need pass props like fullWidth={true}, why not simply pass fullWidth? Because single props without values returns a bool.

Example:

<TextField mask="9999-9999-9999-9999" />
<TextField mask="99-999-aaa" fullWidth primary raised />

Thanks!

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:4
  • Comments:18 (10 by maintainers)

github_iconTop GitHub Comments

2reactions
rosskevincommented, Sep 18, 2017

@kylem038 I used react-number-format in our lib like:

<TextField
        InputProps={{ inputComponent: NumberFormat }}
</TextField>

It worked well, and should work for your input too (assuming you want all the extras TextField brings. It would be great if you would be willing to PR the demos.

2reactions
mbrookescommented, Apr 10, 2017

@kybarg react-maskedinput does look simpler, but it also looks less well maintained. How about if TextField took a prop to substitute the <input> element with an arbitrary React component and passed the mask prop (&&|| a more generic inputProps) to it?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How Can I Mask My Material-UI TextField? - Stack Overflow
I'm trying to use react-input-mask plugin with Material-UI. But if i want to change input value, this is not updating the my main...
Read more >
Mask Material UI TextField - CodeSandbox
Mask Material UI TextField. 0. Embed Fork Create Sandbox Sign in. Sandbox Info. Mask Material UI TextField. 0. 7.9k. 170. anandthanki1anandthanki1.
Read more >
React Text Field component - Material UI - MUI
The TextField wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), ......
Read more >
Input Masking | CSS-Tricks
I don't have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format use...
Read more >
Input masking | React Material-UI Cookbook - Packt Subscription
Here's how you can use the MaskedInput component from react-text-mask with TextField components to add masking abilities:.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found