React-select shows keyboard when is toggled

0
votes

i'm using react-select ^1.2.1 and i'm facing a weird behaviour. When i toggle the dropdown in mobile view keyboard is opening like the screenshotenter image description here

My component inside is this:

render() {
    return (
      <div className="quantity">
        <input
          id={this.props.id}
          type="number"
          name={this.props.input.name}
          value={this.props.currentTravelersNumber}
          className="person-selector"
        />
        <div
          role="presentation"
          className="quantity-button quantity-up"
        >
          +
        </div>
        <div
          role="presentation"
          className="quantity-button quantity-down"
        >
          -
        </div>
  </div>

Any suggestions? Maybe the input tag??

1
javascriptreactjsreact-select

1 Answers

1
votes

I think you should add the attribute "readonly" on your input to avoid the default behavior on this element.

<input
  id={this.props.id}
  type="number"
  name={this.props.input.name}
  value={this.props.currentTravelersNumber}
  className="person-selector"
  readonly
/>