everweij / react-laag

Hooks to build things like tooltips, dropdown menu's and popovers in React
https://www.react-laag.com
MIT License
907 stars 47 forks source link

Fix to prevent layer close on touch devices #81

Closed btravel closed 2 years ago

btravel commented 2 years ago

Hi @everweij 👋 This lib is awesome!

We use the lib for tooltips and complex menus in our app. Currently it is not possible to interact with menus on touch devices - there is a corresponding feature request #77

The problem in TouchEnd event handler in useHover hook that works on capture phase and close menu layer before any react event handler of our menu component. Seems there is no way to override it from outside:

function onTouchEnd() {
  if (show) {
    removeTimeout();
    setShow(false);
  }
}

window.addEventListener("touchend", onTouchEnd, true);

I think this event handler do nothing helpful cause onMouseLeave event handler also closes the layer.

So this pull request do two things:

1) Removes this unnecessary touchEnd event handler 2) Adds name field to package.json (gitpkg validator requires this to use forked version in app.)

If the onTouchEnd event handler do something useful then it's better to setup it on bubble phase using react - in such way our custom menu event handlers will trigger first and can do stopPropagation.

everweij commented 2 years ago

Thanks for your work!