Menu Dropdowns don't work at times with Wacom device

[bbdstar]

There is an issue when using Wacom devices that dropdowns don't drop down. It doesn't add the 'highlighted' class to HTML. I have also experienced issues on some of your demo's. As soon as I use the touchpad on Mac it works, but when switching back to Wacom device it fails again.

[vadikom]

Hi, unfortunately, I am not able to test this personally at the moment but could you please mention what exact device are you using (model, etc.)? I will try to find a way to test this.

[bbdstar]

It occurs on multiple Wacom devices, Intuos models.

I flagged a similar issue with the Elementor team and the fix was to check for "e.pointerType === 'pen'" as an input type.

Hope that helps?

[bbdstar]

Please see these docs...

https://www.w3.org/TR/pointerevents/

[vadikom]

Thanks for the valuable input!

It seems a fix for Wacom devices is very simple then, however, I am not sure this is a proper generic fix. Since currently "pen" input is treated the same way as "touch" (BTW, if you "click" a parent item with the Wacom pen, it shows the sub menu, right?) and I tend to believe this should stay that way since normally a pen device is not able to move a cursor on the screen - unless it's a Wacom pen as I now understand - sorry but I must admit I am not personally familiar with these devices.

So I am really a bit hesitant and puzzled how to address this. :?

[ginsterbusch]

Yes and no: Other digital pens are able to do this, too. So its probably not just an issue with Wacom devices. Also, one may configure their pen device differently, eg. if its used as a mouse replacement.

Update: Just found this answer on Stack Overflow: https://stackoverflow.com/a/51959749/8612451

Essentially the respondent suggests using Pressure.js, which also appear as suggestion in similar questions on SO elsewhere.

cu, w0lf.

[bbdstar]

I think the event may be getting confused somehow. Sometimes it will act like mouse where dropdown will work on hover and at other times it acts like touch, where you have to click for it to dropdown. Maybe when checking for input types use a switch or if 'mouse' || 'pen' then action.

The issue Elementor had was on scroll. As soon as you'd hover over their main widget menu, it would start scrolling, rather than waiting for a drag event. Here was my hack to fix perfect-scrollbar.js until Elementor upgraded to a newer version:

/* perfect-scrollbar v0.6.12 */
`//function p(t){return!(!t.targetTouches||1!==t.targetTouches.length)||!(!t.pointerType||"mouse"===t.pointerType||t.pointerType===t.MSPOINTER_TYPE_MOUSE)}

function p(t){
if (t.pointerType && t.pointerType === 'pen' && t.buttons === 0) {
return false;
}
if (t.targetTouches && t.targetTouches.length === 1) {
return true;
}
}`