Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
atdrago opened this issue Apr 23, 2018 · 8 comments
Open

Comments

@atdrago
Copy link

atdrago commented Apr 23, 2018

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
Copy link
Author

atdrago commented Apr 23, 2018

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
Copy link
Owner

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

@atdrago
Copy link
Author

atdrago commented Apr 24, 2018

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
Copy link
Owner

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

@polens29
Copy link

polens29 commented May 10, 2018

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

@polens29
Copy link

@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
Copy link

@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
Copy link

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: 800968f

The line to be replaced is this one:

window.open(url, "_blank");

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants