Pseudo-classes are triggered randomly (hover/mouseOver, focus/focused, active/mouseDown)

[XOMAv2]

Bug!

If an element is in several states (:hover, :focus, :active), and it contains a set of attributes for each of these states (Element.mouseOver, Element.focused, Element.mouseDown), then one of the conflicting states will be selected randomly.

Steps to reproduce

1. Several elements are defined in the markup.
2. Elements use several identical pseudo-classes, for example, Element.mouseOver and Element.mouseDown.
3. Within the element, pseudo-classes are defined in different order.
4. Pairs of identical pseudo-classes affect the same attributes with the same values.

Ellie example

Causes of the bug

The elements will have 100% identical CSS classes, but they will be written to the intermediate stylesheet in a different order, and at the end, duplicates will also be removed. If several conflicting events occur (:hover, :focus, :active) according to CSS rules, the selector defined later will be applied.

Expected behavior

Ideal scenario: each element gets a set of unique classes that are applied in the order they are listed in the attribute list.
Alternative scenario: the order of application of pseudo-classes is strictly fixed (:hover < :focus < :active).

Versions

• OS: masOS Ventura 13.2.1
• Browser: Chrome
• Browser Version: 114.0.5735.198
• Elm Version: 0.19.1 - latest
• Elm UI Version: 1.1.8 - latest

[XOMAv2]

#bug #has-ellie