Bug 28630 – document.activeElement is not changing when clicking on a link

• Component: DOM
• Status: RESOLVED DUPLICATE

[jasneet]

Created attachment 38402 [details]
reduced testcase

I Steps:
Go to
http://www.mlslistings.com/App_Dialog/ViewAll.aspx?systemname=_ListingArea&clientid=ctl00_cph1_sq1__ListingArea_textbox&Values=
Or
1. go to www.mlslistings.com
2. click "View All" link under either city or area
3. Attempt to choose one of the areas using the checkboxes

II Issue:
Checkboxes for choosing city or area don't work for selecting search
parameters in www.mlslistings.com

III Conclusion:
The "checkbox" is faked checkbox, it is actually an image embraced with a link. When click on it, javascript function _RSNodeClicked() is invoked to execute the functionalities.

In webkit, the functionalities fails because there is an uncaught exception thrown in backend, which is:
......
Uncaught TypeError: Cannot read property 'nodeName' of null
......
This exception is thrown because the DOM attribute document.activeElement is not correct in webkit. When click on a link, the document.activeElement is body element in webkit, however it should be the link element itself, like what in IE and FF.

IV Other Browsers:
IE7: ok
FF3: ok

V Nightly tested: 46809

Bug in Chromium : http://code.google.com/p/chromium/issues/detail?id=14436

[Peter Lenahan]

Here is a JavaScript workaround to the ActiveElement problem in Safari and Chrome.

Add a listener on the mousedown event or any other event which you are depending on.

The event listener will keep the status of the active element, 
so when you want to reference it, you can use it.


// Declare a global variable to track the elements
var myActiveElement = null;


// define the event listener first
function _dom_trackActiveElement(evt) {
    if (evt && evt.target) { 
        myActiveElement= evt.target == document ? null : evt.target;
    }
}

if(navigator.userAgent.toLowerCase().indexOf('webkit') > -1)
{
    // Register the event listener here
    document.addEventListener("mousedown",_dom_trackActiveElement,true);
}


...
Now in a method where I need to use the activeElement, I have it available 
as a global variable it is always set in the event listener which tracks it.

    if (myActiveElement != null)
        myfunctioncall(myActiveElement);
    else
   	myfunctioncall(document.activeElement);

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6 on macOS 12.5 using attached "reduction" test case and it shows following across browsers upon clicking link:

*** Safari 15.6 on macOS 12.5 ***

document.activeElement is: BODY

*** Firefox Nightly 105 ***

document.activeElement is: A

*** Chrome Canary 106 ***

document.activeElement is: A

_____

I am not sure on web-spec but I am going to change status to "New" since Safari is different from other browsers. If Safari / Webkit is right, please ignore and mark this as "RESOLVED WONTFIX". Thanks!

[Alexey Proskuryakov]

The website is no longer affected. 

I think that this is essentially a dupe of bug 22261, although we could theoretically change document.activeElement temporarily, only while handling the click. We do set the :active pseudo-class, after all.

*** This bug has been marked as a duplicate of bug 22261 ***