1

the inputmode seems to be ignored by chrome on Android device when changing the input type attribute.

Sample example of the code

class InputApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        mask: true
    }
  }
  
  render() {
    return (
      <div>
        <h2>Entry</h2>
        <input type={this.state.mask? "password": "text"} onFocus={() => {this.setState({mask: false})}} onBlur={() => {this.setState({mask: true})}} inputMode="numeric" />
      </div>
    )
  }
}

ReactDOM.render(<InputApp />, document.querySelector("#app"))

https://jsfiddle.net/3qhyjbgv/21/

While having an input that mask the value when blurred, the inputmode seems to be ignored by chrome on Android device. in chrome on IOS, it's actually working as expected

tjadli
  • 790
  • 6
  • 16

1 Answers1

0

I wanted to add a comment but I don't have enough reputation.

Can this be about your keyboard settings on your android device? I tried your code on my android device and normally I don't have numbers on my keyboard but when I click the input area, number row appears on top of my keyboard. I don't have a numeric keyboard on my phone so it always adds a number row on top of my keyboard.

So I would say that input mode doesn't get ignored, but the reason why it isn't working as you expect may be your device's keyboard. Can you try it on a different android device?

You've probably checked this link before but if you haven't maybe some of these solutions can work for you.

betty
  • 13
  • 1
  • 5
  • The issue is not the number row not appearing, the whole keyboard should be numerical. if you remove type changes of the input, it will properly be reflected FYI, on IOS you can get the correct behaviour for this one – tjadli May 17 '23 at 16:07