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

[feibyte]

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