search

os-js / osjs-gui

OS.js GUI Module
https://manual.os-js.org/v3/
Other
18 stars 10 forks source link

Touch in context menu does not work in Firefox RDM #34

Closed RossComputerGuy closed 3 years ago

RossComputerGuy commented 3 years ago

Currently touch input isn't accepted in the context menu making it impossible to use the context menus with a touchscreen.

Edit by Anders: It seems like touch input is not working correctly in Firefox while using "Responsive Design Mode".

andersevenrud commented 3 years ago

NB: I edited the issue title + description

andersevenrud commented 3 years ago

I can confirm this is not working properly, but is not reproducible on a real touch device using Firefox, so this is mostly some wonk in the FF devtools.

From initial inspection it does not seem like the DOM gets a :hover after a touch on an element that not an input.

This also works as it should on Chrome (albeit right mouse button and not a "long touch" will make contextmenu appear at 0x0 -- but this is expected because right mouse button is not a thing on touch)

andersevenrud commented 3 years ago

Just to isolate the issue I've created a reproducible example here: https://f4c7v.csb.app/

So it's definitely related to the Firefox devtools as this works as expected anywhere else.

afaik the :hover pseudo-class should be valid and reliable for doing this even on a touch device, so might have to bring this to bugzilla. An initial search there did not return anything specifically related to this.

andersevenrud commented 3 years ago

I've done a bit of testing on this to try to make up a solution with no compromises. But as always when dealing with incompatibilities like this there's always a knock-on effect.

Not even replacing the <div> element with a custom styled <button> then a :active rule would completely solve this, because that would introduce unwanted behavior when using a mouse. Ex. click one expandable menu entry, then hover over another -- the one first clicked won't disappear until the one hovered was clicked. (Not to mention that would break HTML semantics, because a <button> can only have Phrasing content according to specs -- so I had to do a minor refactor to even confirm this).

The only way to get around this issue without any unwanted side-effects would be to replace the CSS with JavaScript events, which I'm a bit hesitant to do.

andersevenrud commented 3 years ago

I'm closing this one because it's a vendor issue.