bringToFront and sendToBack cause elements to lose hover state

[axelpale]

Tapspace methods that reorder DOM elements can cause elements to lose their CSS hover state. This happens on Firefox but not on Chrome (as of 2023).

These methods include Component:bringAbove, :bringToFront, :sendBelow, and :sendToBack. The methods were improved in 2.0.0-alpha.18 so that the DOM is not modified unnecessarily. That improvement does not remove the problem of the hover state.

The :hover state cannot be reinstated programmatically. The state reactivates only when user moves the cursor and browser detects it.

As a workaround, listen mouseover and mouseout events and add and remove a custom hover class accordingly. The class remains regardless of reordering of DOM. This approach has downside that it can be complicated to ensure the class is always added and removed consistently, making the effect sticky.

[axelpale]

One hypothetical approach to make the behavior described above more cross-browser consistent is to reorder all the siblings instead of the target element. This way the target can keep its hover state. However, this approach possibly has computational issues if there are lots of siblings and also becomes messy if two call on the above listed methods operate on the same set of elements.