Skip to content

Conversation

@ryanseddon
Copy link
Contributor

Fixes: #137

Description

Take two, as @sunesimonsen suggested, we had a pretty good solution in our previous menu component to handle closing the menu when clicked outside of the containers.

Detail

This adds a mousedown event to any same origin iframe documents and triggers the toggle function to see if it should close or not.

Checklist

  • 💂‍♂️ includes new unit and snapshot tests
  • 📝 tested in Chrome, Firefox, Safari, Edge, and IE11

@ryanseddon ryanseddon changed the title fix(menus): Change handleOutsideMouseDown to handle when clicking on … fix(menus): Change handleOutsideMouseDown to handle when clicking on iframes Sep 10, 2018
@coveralls
Copy link

Coverage Status

Coverage decreased (-0.2%) to 95.97% when pulling 5226e2d on ryan/click_outside_handle_iframes into ae66215 on master.

Copy link
Contributor

@sunesimonsen sunesimonsen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Thanks this seems to work very well.

Let's leave the menus inside other floating panels for another time.

const doc = getDocument ? getDocument(this.props) : document;
const iframes = doc.querySelectorAll('iframe');

return [...iframes].reduce(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be good, but lets check that this is transpiled into IE11 compatible syntax.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah babel handles this fine transforms it to:

return [].concat(_toConsumableArray(iframes)

Tested this already in all browsers in the checkbox marked in the description. So IE11 and edge are all good.

Copy link
Contributor

@austingreendev austingreendev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very clean. Thanks @sunesimonsen for the guidance on this one!

[pending IE11 checks]

@sunesimonsen
Copy link
Contributor

Very clean. Thanks @sunesimonsen for the guidance on this one!

🤝

@ryanseddon ryanseddon merged commit 29d40aa into master Sep 11, 2018
@ryanseddon ryanseddon deleted the ryan/click_outside_handle_iframes branch September 11, 2018 01:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

Menu doesn't close when an outside click hits an iframe

5 participants