search

jasonsalzman / react-add-to-calendar

A simple, customizable, and reusable Add to Calendar button component for React
https://jasonsalzman.github.io/react-add-to-calendar/
MIT License
180 stars 124 forks source link

Calendar sheet disappears immediately after becoming visible in iOS 11.3 #28

Open atdrago opened 6 years ago

atdrago commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

atdrago commented 6 years ago

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 commented 6 years ago

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

polens29 commented 6 years ago

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

polens29 commented 6 years ago

@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 commented 6 years ago

@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 commented 5 years ago

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