v6 mouse events and React

[bhowell2-fleetio]

Subject of the issue

The newest release, v6, is eating mouse events. This was not occurring in v5. (edited)

E.g., I have a hover-popper registered on a widget's child element and it does not receive the mouseOver event

[adumesny]

before you even click&drag ?
the only event registered initially is a mousedown event on the draggable area, but if your widget is inside it get it first.
there is also mouseenter but does nothing until you drag.

you need to post an example showing the issue please. mouseover is not used anywhere.

[bhowell2-fleetio]

@adumesny reproducer: https://github.com/bhowell2-fleetio/gridstack-v6-mouseevent-repro

It seems to mostly be a react thing. I'm not sure what changes were made in v6, but v6 doesn't work "as well" with react as v5. There is also a double mouseEnter event happening on both versions when registering via addEventListener.

[damanwiththeplan]

V6 doesn't work in my react project

[adumesny]

thanks for the sample! I found the problem. apparently we do use mouseover after all

  protected _setupAutoHide(auto: boolean): DDResizable {
    if (auto) {
      this.el.classList.add('ui-resizable-autohide');
      // use mouseover/mouseout instead of mouseenter/mouseleave to get better performance;
      this.el.addEventListener('mouseover', this._mouseOver);
      this.el.addEventListener('mouseout', this._mouseOut);
.....
  protected _mouseOver(e: Event) {
    this.el.classList.remove('ui-resizable-autohide');
    e.stopPropagation();
  }

and apparently in v6 I added the e.stopPropagation(); which prevented others (you) from getting it, which is used for mouseenter as well.

I'll have to test why I made that change, but that's incorrect.

[adumesny]

Update: according to the doc stopPropagation () (https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) is what I want to prevent parent from receiving the events if I'm consuming it, but NOT multiple handler on that event - which I need for nested grids as the parent will otherwise also get an enter (after getting a leave for going to a child).

this was broken in previous build. Not sure why react onMouseEnter() on a child doesn't get a first crack at it, unless it's waiting for it to bubble to the top to handle it, which seems broken to me. If your child has a enter handler if you get it first, then bubble to me, but I don't want to bubble to a parent grid-item

I will have to special case not handling that enter if a child that wants is present, but that seems a lot of work and not necessary.

[adumesny]

fixed in v6.0.1 - don't forget to donate if you find this lib useful!

@patrickabkarian saying it doesn't work doesn't help me one bit... file a separate bug with reproduceable case like Blake did. I don't use React (Angular)