Simple menu not dismissed when touching rest of screen on iOS (iPad) #843
Description
What MDC-Web Version are you using?
0.13.0
What browser(s) is this bug affecting?
iOS 10 Safari
Mozilla/5.0 (iPad; CPU OS 10_3_3 like Mac OS X) AppleWebKit/603.3.4 (KHTML, like Gecko) Mobile/14G5047a
What OS are you using?
iOS 10.3.3
What are the steps to reproduce the bug?
- On the iPad, goto https://material-components-web.appspot.com/simple-menu.html
- Touch "REVEAL MENU" button to open the menu
- Touch the screen off the menu to dismiss it.
- Observe the menu is not closed.
What is the expected behavior?
The menu should close when touching elsewhere on the screen.
What is the actual behavior?
The body click event is not fired, so the menu remains open, forcing you to pick a menu action/item.
Any other information you believe would be useful?
Click events normally do not bubble up to the html or body tags in iOS. If the body tag has a CSS cursor property set to pointer, a click event will after a delay eventually bubble, but this is too slow to be a feasible workaround.
Including a 'touchstart' as well as a 'click' handler in the simple menu registerBodyClickHandler() method will let the menu perform correctly, but this then means all adapter users would have to remember to do something similar. A better solution might be a breaking change to have the adapter have a registerBodyInteractionHandler( /* type: string, handler: EventListener */) and then the foundation could register multiple event types to watch for. (cf. mdc-menu that takes this approach with its registerBodyInteractionHandler())