Seeking assistance with a unique issue I am facing on my app-like website. I have implemented a swipable menu but I want it to close whenever the user taps outside the menu. I have tried using ngTouch for swiping and attached ng-click="menuToggled = false" to achieve this functionality.
However, I encountered a problem where attaching ng-click to the body resulted in links within the menu not working and being unable to focus on input fields on the body. This issue only occurs on mobile devices such as iOS, Android, or when using Chrome device emulation.
I am considering alternative solutions to close the menu on tap, but I find this problem peculiar. Any thoughts or suggestions on how to resolve this would be greatly appreciated.
For a demonstration, you can view a simple demo here. Please note that it works on desktop, but when using device emulation in Chrome, you may encounter issues with input field focus unless you hold down the mouse button:
<body ng-app="myApp" ng-click="showMenu = false">
<input type="text">
<button type="button" ng-click="showMenu = true; $event.stopPropagation();">Show menu</button>
<div class="menu" ng-show="showMenu"></div>
</body>