Premium support for our pure JavaScript UI components


Post by armandcolenatio »

Hello,

In one of our apps, we listen for the eventmouseover and eventmouseout events to display and close some custom popovers. Since we don't want these to instantly open up, we debounce the eventmouseover event. Of course, we have some filtering logic to isolate specific events. We've noticed that sometimes these hover popovers do not show up.

After a bit of debugging, we've ended up with the conclusion that these event objects mutate. This is pretty obvious when you also debounce the eventmouseover event.

We've managed to reproduce this in the Bryntum Scheduler examples.
We've used the big data set demo: https://bryntum.com/products/scheduler/examples/bigdataset/

At the end of the demo code, please add the following lines:

scheduler.on('eventmouseover', (event) => console.log('eventmouseover -> ', { ...event }));
scheduler.on('eventmouseover', (event) => setTimeout(() => console.log('timed out eventmouseover -> ', event), 500));

scheduler.on('eventmouseout', (event) => console.log('eventmouseout-> ', { ...event }));
scheduler.on('eventmouseout', (event) => setTimeout(() => console.log('timed out eventmouseout-> ', event), 500));

In order to reproduce the issue, you'll need to hover the events in the scheduler. Sometimes, you will be able to see in the console that the event object that's instantly printed is the eventmouseout event. However, if you check the event object that's linked to the same event and printed after 500 milliseconds, you can see that it's actually a schedulemouseenter event. This is really weird because we're explicitly listening for eventmouseover events.

Notice that we're using spread when instantly printing the event in the console. That's because sometimes it seems that the event mutates even before that.

The eventmouseout event doesn't seem to be plagued by the same issue.

This is really frustrating because if we have stacked events and resource time ranges, it feels like it's even worse. It takes multiple hover tries for the users to get to see the popovers.

Kind regards,
Armand


Post by ghulam.ghous »

Hi there,

Thanks for the detailed report. I was able to reproduce the issue and created a ticket here https://github.com/bryntum/support/issues/8765 to fix/investigate it. You can subscribe to it to keep track of updates.

Regards,
Ghous


Post by mats »

eventmouseover is based on native mouseover and this is how mouseover works, the event bubbles as you hover over the child events inside an eventbar. Most likely what you want to use instead is eventMouseEnter and eventMouseLeave. Try these instead?

https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/SchedulerDomEvents#event-eventMouseEnter


Post by armandcolenatio »

Hello mats,

It indeed works better with eventMouseEnter and eventMouseLeave, however, sometimes the leave event is emitted after the enter event.

Using the same example as above, but with the following event listeners instead:

scheduler.on('eventmouseenter', (event) => console.log('eventmouseenter -> ', { ...event }));

scheduler.on('eventmouseleave', (event) => console.log('eventmouseleave-> ', { ...event }));

Please drag multiple events on the same row. If you start moving the cursor through the events back and forth, at some point, the leave event is emitted after the enter event. With the custom popovers that we have, this means that the popover for the currently hovered event is opened, but quickly closed by the eventmouseleave event of the previously hovered event.

It also sounds weird. When moving the cursor from event A to event B, the leave event for A is fired after the enter event for event B is fired.

Kind regards,
Armand


Post by kronaemmanuel »

Hi Armand,

I've created an issue to track this: https://github.com/bryntum/support/issues/8786. Please subscribe to the issue for more updates. Thanks for the report.

Regards,
Krona


Post by armandcolenatio »

Hello,

Thanks for checking it out. Could we also have a 'feature request', since we've already talked about mouse events? Resource time ranges have only the mouse over and mouse out events, would be nice if those would also have the mouse enter and mouse leave events :D

Kind regards,
Armand


Post by ghulam.ghous »

Hi Arman,

I have created a feature request here https://github.com/bryntum/support/issues/8796. You can subscribe to it to keep track of updates.

Regards,
Ghous


Post Reply