Allow to add mask to Input component

[Chegleyev]

Could you please add possibility to set input element for input field and fixedLabel property. In my case I need to do masked input and fix floating label to avoid overflow label and placeholder.

<Input inputElement={MaskedInput} floating={true} label="IP" mask="299.299.299.299" placeholder="10.0.0.1" fixedLabel={true} />

[javivelasco]

Can you paste the full component reproducing the issue? I don't totally get it :S

[Chegleyev]

Ok, try to explain. I need text input component with mask, for example IP-address selector

Previously i used callemall/material-ui components, in theirs input component I could replace html input with my component by passing it as children.

It looks something like <TextField {...textFieldParams}> <MaskedInput {...maskParams} /> </TextField>

It works good, but masked input usually has placeholder and it overlays with floating label, something like:

In callemeall's component there is property to avoid this

floatingLabelFixed – If true, the floating label will float even when there is no value.

[javivelasco]

Ok I understand now! It makes sense but I need to look on it. I'll try to fix it 👍

[aislanmaia]

:+1: for custom input element.

The possibility for adding a custom input element should be nice. I'm right now trying to put a masked input, but I did hit in this blocker.

[romgrk]

If anyone is interested, I've been able to implement a masked input with react-toolbox@2.0, with a dependency on https://github.com/insin/inputmask-core. It's mostly a copy of https://github.com/insin/react-maskedinput, adapted to play nice with react-toolbox Input component.

Gist: https://gist.github.com/romgrk/9513d238e00bb5df60af7b2f661bbe17

NB: This is not tested at all and there is no guarantee that it'll work for you. But it's possible. NB2: The gist also shows a dependency on Redux, but you can delete that and replace the export

export default connect(
)(MaskedInput);

by

export default MaskedInput

[zanzamar]

Very grateful for your work @romgrk. Thank you.

I tweaked it a little for our needs (and linting rules).. Here is one which updates the placeholders to be hints and a few other things.

https://gist.github.com/zanzamar/ff87834ce3be898bb73fef6c57a61713

[melnikoffalexandr]

I did not understand how to attach to the react-toolbox input, the mask. Please detail.

[romgrk]

• Copy the file in your project
• npm install inputmask-core

  import MaskedInput from './MakedInput.js';
  const render = () =>
  <MaskedInput mask='11/11/1111' onChange={value => console.log(value)} value={myValue} />

I'd recommend using @zanzamar 's version as it doesn't use React.createClass, which is gone in newer react versions.

[melnikoffalexandr]

already there is a ready-made component. How to attach to it?

/ previous code/

render() { const {label, hint, required} = this.props;

let content = (<Input
    type="tel"
    label={label}
    name="phone"
    hint={hint}
    maxLength={11 }
    required={required}
    value={this.props.value}
    onChange={this.handleChange}
    onKeyPress={this.handleKeyPress}
  />);
content = (this.props.id) ? <div id={this.props.id}>{content}</div> : <div>{content}</div>;

return (content);

} }

[melnikoffalexandr]

without changing my component, just add

[romgrk]

Please edit your comment to put all code inside the ```backtick block```, and enable syntax highlighting by placing the language identifier after the opening backticks as such:

```jsx 
<div />

Regarding your issue, you just need to replace your `<Input />` component with a `<MaskedInput />`. Most of the props are passed from the `<MaskedInput>` to the `<Input>`, but there are a few exceptions; see the `render()` method [here](https://gist.github.com/zanzamar/ff87834ce3be898bb73fef6c57a61713#file-maskedinput-jsx-L308-L318) for details.

[melnikoffalexandr]

Thanks for the answer. Input from the React Toolbox, when I change to Masked Input, the design changes. How to save the Input design from the React Toolbox

[antoniopresto]

I'm using this for now: https://gist.github.com/antoniopresto/89aad029df263b023c62fa02928d1a78