There is a global document click event(React hook useClickAway). But when you click on a slide, the event does not fire About example: circle in header, like avatar dropdown, click on it trigger menu. Menu closes if you click anywhere outside. How to close menu without hacks, when click to swiper slide too? Codesandbox example
Asked
Active
Viewed 1,355 times
0
-
Possible duplicate of: https://stackoverflow.com/a/32795201/3597730 – ruby_newbie Feb 22 '22 at 19:40
-
Does this answer your question? [Detect click outside React component](https://stackoverflow.com/questions/32553158/detect-click-outside-react-component) – ruby_newbie Feb 22 '22 at 19:40
-
@ruby_newbie Click outside works fine, but if you click to swiper slide, event is not fire. The click event stops and does not reach the document – Artur13 Feb 22 '22 at 19:47
-
Please add the solution in the answer below – Dharman Feb 22 '22 at 20:13
2 Answers
0
prop touchStartPreventDefault={false} is solution
Artur13
- 21
- 4
-
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 24 '22 at 08:54
0
Try setting the allowTouchMove prop to false in your swiper settings.
By default, the prop is set to true to allow the movement of swiper slides by dragging and preventing any other unwanted click propagation making document clicks not fire.
Changing it to false may prevent dragging to move the swiper slide but it solves the issue. Check docs here
Ibrahim Frank
- 1
- 1