react-dates: Mobile Date Picker Doesn't Open on first Click

I’m experiencing an issue with various settings on the latest iOS with the portal and without the portal. In which a prompt on the device appears either via a Done or an X as shown here:

glass_and_iphone_6_ ios_10_2__14c89

The user has to click done in order for the prompt to pop up. This is only an issue on iOS devices and not on android phones.

      <SingleDatePicker
        {...this.props}
        id="date_input"
        date={date}
        numberOfMonths={months}
        placeholder="00/00/00"
        focused={focused}
        onDateChange={this.onDateChange}
        onFocusChange={this.onFocusChange}
      />

      <SingleDatePicker
        {...this.props}
        id="date_input"
        date={date}
        withFullScreenPortal={true}
        withPortal={true}
        numberOfMonths={months}
        placeholder="00/00/00"
        focused={focused}
        onDateChange={this.onDateChange}
        onFocusChange={this.onFocusChange}
      />

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 19 (1 by maintainers)

Most upvoted comments

Any news on this? Anything I can do to help? An ugly workaround I’m using for this is to blur the input on focus: onFocusChange={(focused) => { $('.DateInput__input').blur(); self.setState({ focusedInput: focused }); }} It flashes the done bar on the bottom for a sec, and then the datepicker appears.

NickTiut on Feb 22, 2017

I found this approach:

let placeholder = document.createElement('div');
let isSupportedTouch = 'ontouchend' in placeholder;
// cross-browser check
if (!isSupportedTouch) {
  placeholder.setAttribute('ontouchend', 'return;');
  isSupportedTouch = typeof placeholder.ontouchend === 'function';
}
const event = isSupportedTouch ? 'touchstart' : 'click';
placeholder = null;

What do you think?

StefanoPastore on Feb 13, 2017

I’m reopening this so we can continue tracking this issue (since it is definitely still there).

majapw on Feb 13, 2017

This is on Safari and Chrome it’s specific to iOS handling of fields not just safari.

iamkevingreen on Jan 12, 2017