Thursday, 23 March 2023

Chrome android keyboard doesn't reflect inputmode when changing the type property field

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



from Chrome android keyboard doesn't reflect inputmode when changing the type property field

No comments:

Post a Comment