Calendar sheet disappears immediately after becoming visible in iOS 11.3

[atdrago]

In iOS 11.3, the calendar sheet will appear, then immediately hide. It can be reproduced on any device running iOS 11.3 on the demo site. Thank you very much for your help!

[atdrago]

I fixed this by modifying the handleDropdownLinkClick method to add an isIos check, and breaking out early if true, before this line https://github.com/jasonsalzman/react-add-to-calendar/blob/master/src/ReactAddToCalendar.js#L54. Therefore the default is not prevented and iOS handles the URL naturally. All iOS platforms that we support (9, 10, 11) seem to handle the data:text/calendar url correctly without any extra JS.

[jasonsalzman]

Thanks @atdrago! If you make a PR for that fix, I'd be happy to merge it in.

[atdrago]

Hey @jasonsalzman, I'm sorry but I probably won't be able to put a PR together for this. I think we're probably, unfortunately, going to go with a server downloaded ICS file rather than use this library because of this 2-year-old iOS Chrome bug (which I just ran into while testing this fix) https://bugs.chromium.org/p/chromium/issues/detail?id=666211

Because of this, I can't justify to my team spending time on a PR for this. I'd be happy to share what I did though. Before the event.preventDefault(), I added this:

const isIos = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);

// If we're on iOS, allow the URL to open naturally
if (isIos) {
    return true;
}

I hope that helps!

[jasonsalzman]

Ya, unfortunately that chrome bug is a real pain. Thanks anyway for reaching out!

[polens29]

@atdrago This fix doesn't seem to work for me. Did you edit anything in helpers/index.js?

[polens29]

@atdrago @jasonsalzman hi, I'm dropping by again. I have tried this fix, I have also tried to upload it in amazon s3 and download it from there, but this issue is still here!

[StefanoDeVuono]

@polens29 @atdrago I've found having the linke target be _blank causes problems so I added the following and things seem to work:

import AddToCalendar from 'react-add-to-calendar'

const handleDropdownLinkClick = AddToCalendar.prototype.handleDropdownLinkClick

AddToCalendar.prototype.handleDropdownLinkClick = function(e) {
  const isIos = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
  if (isIos) {
    e.target.target = '_self'
    return true
  }
  handleDropdownLinkClick.call(this, e)
}

[dreamyguy]

I had another take at it, though the approach was similar. Replace:

window.open(url, "_blank");

with:

const isIos = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
const openMode = isIos ? '_self' : '_blank';
window.open(url, openMode);

...as I did here: https://github.com/jasonsalzman/react-add-to-calendar/commit/800968fc088e070892a26b3ecb2e001062c014e6

The line to be replaced is this one: https://github.com/jasonsalzman/react-add-to-calendar/blob/4daecab7f278c15e4bbba606708590fdd21591ed/src/ReactAddToCalendar.js#L80