Add "enable mask on focus" feature

[darrenjennings]

Currently the mask is always enabled. It would be nice to have the mask only show up "onFocus". Would be cool to have "unFocusedPlaceholder".

e.g. unFocusedPlaceholder here is "Phone Number"

[SpencerCDixon]

After reading the source, you can already do this! Add a 'placeholder' prop to the masked input and you will get the functionality you're after. Cheers

[darrenjennings]

@SpencerCDixon, hey thanks. It looks like it won't trigger the character replacement until I start typing, so the placeholder will be there until the phone number start. This brings up that MaskedInput doesn't handle the onFocus event. I think it would be intuitive to remove the placeholder value onFocus and show the masked input.

<MaskedInput
    id="phone"
    name="phone number"
    className={!isEmpty(this.state.phoneError.message) ? 'error-input' : ''}
    mask="(111) 111-1111"
    placeholder="Phone Number"
    onFocus={this.inputOnFocusHandler.bind(this)} // Doesn't work
    onChange={this.inputChangeHandler.bind(this)}
    placeholderChar="X"
    value={this.state.phone}
/>

[SpencerCDixon]

oops totally misread what you wanted! Apologies. Maybe submit a pr?

[karnex47]

You can always do this:

<MaskedInput ref={(ref) => this.input = ref && ref.input} id="phone" name="phone number" className={!isEmpty(this.state.phoneError.message) ? 'error-input' : ''} mask="(111) 111-1111" placeholder="Phone Number" onFocus={this.inputOnFocusHandler.bind(this)} // Doesn't work onChange={this.inputChangeHandler.bind(this)} placeholderChar="X" value={this.state.phone} />

then attach onFocus handler to this.input on componentDidMount. But thats a workaround and I agree there should be a onFocus handler

[darrenjennings]

@karnex47 btw I think I am mistaken, I think that onFocus will work since the input uses the ...props on the <input /> element.

[felipenmoura]

The problem seems to be that MaskedInput ends up replacing its own onFocus with the one that comes from props. It should simply add both onFocus and onBlur from props to a queue e execute them after its own onFocus and onBlur.