Search code examples
reactjstouchmaterial-ui

Material UI ClickAwayListener remain open on touchmove event

I am inexperienced with mobile touch events so I am seeking some clarification. I have a Material UI ClickAwayListener which wraps a Popper. I want this Popper to remain open until the user clicks or taps outside. I found when testing on a touch device that the onClickAway function was invoked by a touchmove (as expected when the user removes their finger).

I worked around this issue by using a touchmove event listener and state property that the user is moving on the screen. A working example is here.

Is there a simpler solution to this? Is there some way to tell ClickAwayListener to ignore touchend when preceeded by a touchmove?

Solution

  • This was an overlooked event sequence in Material UI. My PR to fix it has been accepted and will ship in the next release 🙂

    The issue I raised on github.