react-modal: iOS - Clicking on overlay does not dismiss the modal

Summary: iOS - Clicking on overlay does not dismiss the modal

Steps to reproduce:

Open the react modal with Safari or Chrome on an iOS device (was testing on iPod Touch 6th Gen/iOS 10)
Click on the overlay. Modal is not closed and there is no error in the console.

Expected behavior: Clicking on the overlay should close the modal

Additional notes: Works fine on desktop and Android browsers.

As a temporary workaround, added

onAfterOpen={() => {
    let el = document.querySelector('.ReactModal__Overlay');
    el && el.addEventListener('click', closeModalFn);
}}

to handle the click event manually…

Code used:

<Modal
    isOpen={this.state.isModalOpen}
    onRequestClose={() => this.setState({ isModalOpen: false })}
    style={modalStyle}
    shouldCloseOnOverlayClick={true}
>
    {children}
</Modal>

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 26 (2 by maintainers)

Most upvoted comments

A new version was released v1.7. Thank you all for helping! 🎉

diasbruno on Mar 2, 2017

Tested on iOS and I can verify the fix.

diasbruno on Feb 17, 2017

@felipegarcia92 Cloning react-modal on a project will actually fail as @claydiffrient pointed out. If you clone react-modal on its own, you can build and run the examples.

diasbruno on Feb 17, 2017

So this is actually expected behavior if you’ve pulled directly from the repository.

The master branch is in an unstable state at the moment. We’ve recently shifted from using ES5 to ES2015+, but don’t transpile that in the repository. Before the next release we’ll have it published to npm with the proper transpilation done.

Until then, the best option would be to setup your webpack config to not exclude node_modules/react-modal that should fix things for you.

claydiffrient on Feb 17, 2017

Hmm… so the npm module I downloaded just today is ^1.6.5 but it seems to be quite out of date as the lib is still in ES5, i.e. before https://github.com/reactjs/react-modal/pull/299, so I wasn’t to use it with the latest master (i.e., Unexpected token import, etc). Am I missing something obvious? Feel free to point me in the right direction.

mi-lee on Feb 17, 2017

@fedeoo @psimyn - do either of you mind submitting a pull request with your fix? ta!

mattfysh on Nov 25, 2016

@kukikiloke I modified your solution a bit to check only for clicks outside of the container which is working ok.

I suspect this is due to mouseDown/mouseUp not being triggered by touch; 1.4 used an onClick.

I’ll have shot at fixing it in ReactModal later this week.

onAfterOpen={() => {
  let el = document.querySelector('.ReactModal__Overlay');
  let modalEl = document.querySelector('.ReactModal__Content');

  const handler = (event) => {
    const target = event.targetTouches.length > 0 ? event.targetTouches[0] : event.target;
    if (!modalEl.contains(target)) {
      el.removeEventListener('touchend', handler);
      closeModalFn();
    }
  }

  el && el.addEventListener('touchend', handler);
}}

psimyn on Oct 27, 2016