React-datepicker: Virtual keyboard on mobile phone pops up

[c0debreaker]

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>?

[samhstein]

same issue here, button or read only custom input would probably work, but it would be nice to have an option to hide the keyboard.

[allenaveen]

I am also getting the same issue. Any solution on this?

[rista86]

Having same problem and still no fix on this. Tried fix from other topic but that didn't worked for me.

[c0debreaker]

Folks, I switched to material-ui-pickers. I love it! No issues on their DatePicker.

[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 />}
  ...
/>

[jakks-team]

Workaround by @tinuts works very well.
Thank you.

BUT, this is a workaround. Can't they just provide a props for this?

[Dan2D]

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

[charlesoma]

Thanks @Dan2D, fix worked for me too

[sudokzt]

Thanks @Dan2D , your solution helped me.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[vipulchakravarthy]

Thanks @tinuts it works