1293741 - Clicked element matches(':active') returns incorrect results within 'mousedown' / 'mouseup' handler

Status: NEW

(Core :: DOM: Events, defect)

Description

[travis.kaufman]

Attachment: Screen Shot 2016-08-09 at 14.37.28.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36

Steps to reproduce:

(User Agent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:48.0) Gecko/20100101 Firefox/48.0")

1. Navigate to https://jsfiddle.net/2vmtochy/
2. Open the inspector
3. Press down on the button using a mouse / trackpad
4. Release the pointer device


Actual results:

On mousedown, the event handler logged 'Active? false'. On mouseup, it logged 'Active? true'.


Expected results:

Since the "true" / "false" value was being logged by `btn.matches(':active')`, it should have logged *true* on mousedown, and *false* on mouseup, the opposite of what happened.

Note that a workaround is wrapping the event handler body in a requestAnimationFrame() call. This leads me to believe that it's a race condition between when the event handler code is called and when the layout engine informs the runtime that the button has been activated. However, this behavior seems inconsistent with the spec:

"The element is being activated if it is in a formal activation state and it is not disabled...For example, if the user is using a keyboard to push a button element by pressing the space bar, the element would match this pseudo-class in between the time that the element received the keydown event and the time the element received the keyup event." (https://html.spec.whatwg.org/multipage/scripting.html#selector-active)

Comment 1

[Jason]

I can confirm that this is still occurring in Firefox 53.0.

It is not limited to buttons, but all elements seem not to have the ":active" pseudo-class applied at the point of mousedown (or blur of the field you are leaving):

    document.querySelectorAll("*:active");

Always returns an empty array on Firefox when called from mousedown/blur.

Chrome, Safari, Edge, Internet Explorer (9+) all return an array of active fields at the point of mousedown.


It would be great if anyone might be able to take a look into this.

Comment 2

[David Shin[:dshin]]

So... Event dispatch to DOM that'd run the JS callback gets dispatched, with a call trace like:

dom::EventListener::HandleEvent<mozilla::dom::EventTarget*>
EventListenerManager::HandleEventSingleListener
EventListenerManager::HandleEventWithListenerArray
EventListenerManager::HandleEventInternal
EventListenerManager::HandleEvent
EventTargetChainItem::HandleEvent
EventTargetChainItem::HandleEventTargetChain
EventDispatcher::Dispatch
PresShell::EventHandler::DispatchEventToDOM
PresShell::EventHandler::DispatchEvent

But the invalidation is marked (i.e. snapshot taken) afterwards, with a call trace like:

RestyleManager::ElementStateChanged
PresShell::ElementStateChanged
dom::Document::ElementStateChanged
dom::Element::NotifyStateChange
dom::Element::AddStates
EventStateManager::DoStateChange
EventStateManager::UpdateAncestorState
EventStateManager::SetContentState
EventStateManager::SetActiveManager
EventStateManager::PostHandleEvent
PresShell::EventHandler::DispatchEvent

Comment 3

[David Shin[:dshin]]

Attachment: Minimized Test Case

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Yeah so we generally handle :active as the default action of the mousedown event... Maybe we should just handle it explicitly before? Are we still guaranteed to get a mouseup if we've prevented mousedown? Chrome and Safari had some weird edge cases where elements remained :active indefinitely...