Virtual keyboard on mobile phone pops up

When I visit my app on desktop, everything is great! However, when I open it from my phone and I click the input field of react-datepicker, my phone thinks I’d like to enter data.

So I tried the prop readOnly but unfortunately, it disables the calendar. When I click the input, nothing happens.

Any workaround to this? Maybe instead of <input>, it should be <button>?

[Dan2D]

Found a simple fix by setting onFocus to DatePicker component (at least it worked for me…) <DatePicker . . . . . onFocus={(e) => e.target.readOnly = true} />

[tinuts]

Use a custom input to override the default one, works for me 😃

// DateInput.jsx

import React from 'react';

export default class DateInput extends React.PureComponent {
  state = {readOnly: false};

  render() {
    return (
      <input
        {...this.props}
        onFocus={() => this.setState({readOnly: true})}
        onBlur={() => this.setState({readOnly: false})}
        readOnly={this.state.readOnly}
      />
    );
  };
}

// DatePicker.jsx

<DatePicker
  ...
  customInput={<DateInput />}
  ...
/>