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

[kukikiloke]

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

Steps to reproduce:

1. Open the react modal with Safari or Chrome on an iOS device (was testing on iPod Touch 6th Gen/iOS 10)
2. 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>

[kukikiloke]

In the end the workaround above is not good enough as it will also close the modal when clicking on the content, eventually reverted the version back to 1.4.0

Affected version: 1.5.2
It was working fine in 1.4.0

[psimyn]

@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);
}}

[fedeoo]

I has encounter this issues too.
My context:
react-modal version 1.5.2
react version 15.3.0 or 15.4.0
iOS simulator 10.1

I remove fastclick.js to avoid interference.
I try to debug react-modal, I found onMouseUp and onMouseDown callback never been called. And then I add onClick handler which only have a console statement like this:

div({
        ref: "overlay",
        className: this.buildClassName('overlay', this.props.overlayClassName),
        style: Assign({}, overlayStyles, this.props.style.overlay || {}),
        onClick: function () { console.log('....click') },
        onMouseDown: this.handleOverlayMouseDown,
        onMouseUp: this.handleOverlayMouseUp
      }

It works! but I couldn't find ...click on the console.
It's really very very weird!! I suppose there is something wrong with react on iOS platform.

Does anyone verify this.

[mattfysh]

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

[mi-lee]

I'm still having this issue -- did the PR fix above fix it or is the bug still ongoing?

[diasbruno]

@mi-lee That's right. It needs a release.

Can you download the master branch and confirm the fix (just to make sure)?
It should be working and we can release a new tag.

[mi-lee]

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.

[diasbruno]

I guess the best way to test is to clone the repository and run the server (sorry).

on master, npm install && npm start -s.

for version 1.6+, we have this important fix, it's merged, but no official release yet.

[mi-lee]

OK -- I cloned the repo in my node_modules but getting more transpilation errors:

Module parse failed: /node_modules/react-modal/examples/basic/app.js Unexpected token (16:20)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (16:20)
    at Parser.pp$4.raise (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseIdent (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:2189:12)
    at Parser.pp$3.parsePropertyName (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:2052:101)
    at Parser.pp$3.parseObj (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1988:14)
    at Parser.pp$3.parseExprAtom (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1805:19)
    at Parser.pp$3.parseExprSubscripts (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1620:21)
 @ multi basic

ERROR in ./examples/bootstrap/app.js
Module parse failed: /node_modules/react-modal/examples/bootstrap/app.js Unexpected token (35:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (35:6)
    at Parser.pp$4.raise (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseParenAndDistinguishExpression (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1861:32)
    at Parser.pp$3.parseExprAtom (/node_modules/react-modal/node_modules/acorn/dist/acorn.js:1796:19)
 @ multi bootstrap

etc, etc.

[diasbruno]

it's really missing a transformer babel-plugin-transform-es2015-spread. i'll add it.

[diasbruno]

I pushed a new branch missing-2015-transformer. It should fix the transpiler.

[mi-lee]

OK - let me try. 🙏 thanks so much for helping me out!

[diasbruno]

Sure. ^^
Cloning react-modal standalone would be preferable for testing.

[mi-lee]

Hmm -- same error as above.

Adding babel-plugin-transform-object-rest-spread helped, but moved further along to throw the error at node_modules/react-modal/examples/bootstrap/app.js Unexpected token (35:6) (i.e., JSX). Running bash scripts/build also leads to things like

ERROR in react-modal.min.js from UglifyJs
SyntaxError: Unexpected token: name (Modal) [./lib/index.js:1,0]

[claydiffrient]

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.

[diasbruno]

Tested on iOS and I can verify the fix.

[mi-lee]

Wonderful! Thanks @claydiffrient @diasbruno

[felipegarcia92]

@mi-lee Same issue right now here, did you end up cloning the repo and making webpack compile it?

I'm getting this error while running webpack doing that:

ERROR in ./~/react-modal/lib/index.js
Module build failed: Error: Couldn't find preset "latest" relative to directory "/Users/fernandocolman/Projects/7greenlights-react/node_modules/react-modal"
    at /Users/fernandocolman/Projects/7greenlights-react/node_modules/babel-core/lib/transformation/file/options/option-manager.js:298:19
    at Array.map (native)
    at OptionManager.resolvePresets (/Users/fernandocolman/Projects/7greenlights-react/node_modules/babel-core/lib/transformation/file/options/option-manager.js:269:20)
    at OptionManager.mergePresets (/Users/fernandocolman/Projects/7greenlights-react/node_modules/babel-core/lib/transformation/file/options/option-manager.js:258:10)
    at OptionManager.mergeOptions (/Users/fernandocolman/Projects/7greenlights-react/node_modules/babel-core/lib/transformation/file/options/option-manager.js:243:14)
    at OptionManager.init (/Users/fernandocolman/Projects/7greenlights-react/node_modules/babel-core/lib/transformation/file/options/option-manager.js:373:12)
    at File.initOptions (/Users/fernandocolman/Projects/7greenlights-react/node_modules/babel-core/lib/transformation/file/index.js:221:65)
    at new File (/Users/fernandocolman/Projects/7greenlights-react/node_modules/babel-core/lib/transformation/file/index.js:141:24)
    at Pipeline.transform (/Users/fernandocolman/Projects/7greenlights-react/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/fernandocolman/Projects/7greenlights-react/node_modules/babel-loader/index.js:38:20)
 @ ./src/components/Share/ShareModal.js 13:18-40

[diasbruno]

@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.

[felipegarcia92]

@diasbruno I see,... do you think there's any way I can pull this fix to my project? I currently depend on this library and I was planning to release the website soon, but this error is quite a blocker.

Do you think I should move on to another modal library or something? I'd prefer not to, but you know...

Thanks for the replies! :)

[claydiffrient]

@felipegarcia92 I am working on picking over the fixes to the v1 branch. I am one commit away from completion. I'm hoping to finish it up this weekend then cut a 1.7 release.

[felipegarcia92]

@claydiffrient Thanks for the reply, sounds great, I think I'll just wait since this library has helped a great deal with my app. Thanks for that too haha!

[mi-lee]

Thanks so much @claydiffrient @diasbruno, much appreciated! 🙏

[diasbruno]

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

[0xc0d3r]

I'm still facing the same issue in 3.5.1 version

[AndrewGulidov]

The same issue was reproduced in 3.11.2. Fixed by adding position: absolute to modal class name.