element.webkitMatchesSelector in phantomjs does not report ":focus" accurately #10427

ryangreenberg · 2012-03-14T04:53:59Z

Which version of PhantomJS are you using? 1.4.1

What steps will reproduce the problem?

Run the provided test script with the test HTML (below).

What is the expected output? What do you see instead?
I expect :focus to be true after triggering a focus event on an element. Instead it is false.

Which operating system are you using? OS X 10.7.3

Did you use binary PhantomJS or did you compile it from source? Compiled.

Here is the output of my test script in Chrome, Safari, and PhantomJS:

Chrome

navigator.userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.54 Safari/535.19
$('#some-input').is(':focus'): true
$input[0].webkitMatchesSelector(':focus'): true
$input[0] == document.activeElement: true

Safari

navigator.userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.54.16 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16
$('#some-input').is(':focus'): true
$input[0].webkitMatchesSelector(':focus'): true
$input[0] == document.activeElement: true

PhantomJS 1.4.1

navigator.userAgent: Mozilla/5.0 (Macintosh; PPC Mac OS X) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.4.1 Safari/534.34
$('#some-input').is(':focus'): false
$input[0].webkitMatchesSelector(':focus'): false
$input[0] == document.activeElement: true

Test HTML
<!DOCTYPE html>
<html>
<head>
<title>:focus check</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function(){
console.log("navigator.userAgent: " + navigator.userAgent);
// Simple case
$input = $('#some-input');
$input.focus();
console.log(&quot;$('#some-input').is(':focus'): &quot; + $('#some-input').is(':focus'));

// Similar case
$input.focus();
console.log(&quot;$input[0].webkitMatchesSelector(':focus'): &quot; + $input[0].webkitMatchesSelector(':focus'));

// When a native matchesSelector isn't available, jQuery uses:
// 
//  focus: function( elem ) {
//     return elem === elem.ownerDocument.activeElement;
//  }
// 
// The input == document.activeElement, which suggests that the bug is in webkitMatchesSelector
console.log(&quot;$input[0] == document.activeElement: &quot; + ($input[0] == document.activeElement));
});
</script>
</head>
<body>
<form>
<input id="some-input">
</form>
</body>
</html>

Test script:
var page = require('webpage').create();
page.onConsoleMessage = function(msg) { console.log(msg); };

page.open('file:///' + phantom.libraryPath + '/focus_test.html', function (status) {
if (status !== 'success') {
console.log('Could not open URL');
}
phantom.exit();
});

Disclaimer:
This issue was migrated on 2013-03-15 from the project's former issue tracker on Google Code, Issue #427.
🌟 16 people had starred this issue at the time of migration.

The text was updated successfully, but these errors were encountered:

spmason · 2012-04-03T23:46:43Z

ste...@brandwatch.com commented:

I can confirm this is an issue in 1.4.1, also in 1.5.0 as well

I'm working around by using "elem === elem.ownerDocument.activeElement" instead, but it's not pretty.

Seems to work fine in Chrome 17 and Safari 5.1.5 - I'm not sure if these are using more recent versions of webkit though

robotarmy · 2012-04-06T04:36:59Z

cur...@ram9.cc commented:

Please fix :D

philfreo · 2013-03-09T02:40:48Z

philfreo@gmail.com commented:

Please fix!

philfreo · 2013-03-09T03:19:45Z

philfreo@gmail.com commented:

// Patch $el.is(':focus') until PhantomJS supports it properly.
// https://code.google.com/p/phantomjs/issues/detail?id=427
var _jQuery_is = jQuery.fn.is;
jQuery.fn.is = function(s) {
if (s === ':focus') {
return this.get(0) === document.activeElement;
}
return _jQuery_is.apply(this, arguments);
};

This workaround may help some (put this in your test runner code)

realyze · 2013-05-03T17:17:41Z

+1

caiges · 2013-05-10T17:11:04Z

+1

tjvantoll · 2013-05-10T17:11:37Z

+1

TheCloudlessSky · 2013-05-13T12:25:48Z

+1

camsong · 2013-05-13T21:33:42Z

👍

JamesMGreene · 2013-05-14T05:23:18Z

Since this bug specifically mentions jQuery, I'll note that jQuery added a workaround for this WebKit bug in jQuery core 1.8.2: http://bugs.jquery.com/ticket/12492

Mr0grog · 2013-07-10T22:16:38Z

Though this has been fixed in jQuery, I'm using Poltergeist (a PhantomJS driver for Capybara, which is a browser testing driver for Ruby) for a lot of integration testing. I'd like to be able to test whether an element has focus and it seems like the natural way to do that would be to use the :focus selector. It would be great if this was fixed.

I'd also guess the cause of this is the same as #11432.

ccidral · 2013-08-21T16:48:16Z

+1

Flamefork · 2013-08-28T20:14:33Z

+1

ralfthewise · 2013-09-12T00:25:09Z

+1

roelrz · 2013-10-02T01:17:45Z

+1

vellotis · 2013-10-08T14:05:16Z

+1
If I want to get currently focused element, I have to mock implementation framework which is not a part of BDD principles. The same downside exists in HTMLUnit also.

vincentdieltiens · 2013-10-11T12:23:27Z

+1

SebiTimeWaster · 2013-10-31T17:19:53Z

+1

lijunle · 2014-01-03T19:09:45Z

Please fix it!

coledot · 2014-01-13T21:13:28Z

+1

silvinobarreiros · 2014-01-29T19:36:32Z

+1

joanna1010 · 2014-01-31T01:15:46Z

+1

rgl · 2014-04-14T19:12:05Z

Any progress on fixing this bug?

barnomics · 2014-05-07T18:25:15Z

+1

Would be nice to test accessibly features but no can do without a :focus element or document.activeElement

lorenooliveira · 2014-09-07T02:25:50Z

+1

grossadamm · 2014-10-10T17:25:06Z

+1

vickiccole · 2016-01-18T10:57:01Z

+1

albinekb · 2016-01-26T12:46:39Z

+1

tiffanywei · 2016-02-08T17:35:34Z

+1

emilioplatzer · 2016-03-09T17:45:05Z

+1

garex · 2016-04-25T10:19:54Z

Another possible patch (rude)

// it's for casperjs, but I think you will catch the idea
this.evaluate(function() { document.hasFocus = function() { return true } })

workmanw · 2016-04-30T02:27:16Z

+1

sgress454 · 2016-05-03T14:25:34Z

@garex I tried something like that at one point without much luck -- I don't think the :focus selector just relies on document.hasFocus() returning true, but rather that whatever underlying conditions cause hasFocus() to return true must be met in order for the :focus selector to work.

Jevin23 · 2016-05-07T10:48:41Z

+1

kryptan · 2017-01-03T14:50:32Z

I experimented with this a bit using a 2.1 branch (master crashes for me).

First I tried to fix it in PhantomJS itself, but calling QWebFrame::setFocus() on m_currentFrame or any other frame in webpage.cpp does not have any effect.

Next I looked into WebKit sources, the :focus pseudo class is checked here. SelectorChecker::matchesFocusPseudoClass function calls SelectorChecker::isFrameFocused which in turn calls FrameSelection::isFocusedAndActive. Changing FrameSelection::isFocusedAndActive to always return true fixes this issue although it feels like a hack, I don't know what a proper solution here would be.

P.S. I suggest owner of this repo to remove all junk +1 comments and block their authors.

vitallium · 2017-01-11T15:43:04Z

Can someone check it with recently released 2.5 beta version? Thanks!

cleforwen · 2017-02-17T08:33:43Z

+1

jameswomack · 2017-03-03T00:41:09Z

@vitallium Where can I download a version of 2.5 that will work with Selenium/Nightwatch.js? What I downloaded from https://bitbucket.org/ariya/phantomjs/downloads/ wasn't recognized by Selenium.

DustinAshley · 2017-06-16T18:21:36Z

+1

Vishwaas · 2017-09-25T21:06:22Z

+1

…d causing an infinite loop Addresses ariya/phantomjs#10427

srescio · 2017-10-29T14:01:10Z

+1

…d causing an infinite loop Addresses ariya/phantomjs#10427

stale · 2019-12-28T13:55:00Z

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!

tjvantoll mentioned this issue Dec 2, 2013

Fix and Re-enable some unit tests on dialog, tooltip, and draggable jquery/jquery-ui#1144

Closed

clarabstract mentioned this issue Jan 16, 2014

CSS does not match :focus-ed element teampoltergeist/poltergeist#444

Closed

bdowling mentioned this issue Jan 17, 2014

Fix 1144 (Fix and Re-enable some unit tests on dialog, tooltip, and draggable) jquery/jquery-ui#1173

Closed

cvrebert mentioned this issue May 16, 2014

Modals return focus to [data-target="modal"] on hidden twbs/bootstrap#13612

Closed

Mr0grog mentioned this issue Apr 26, 2016

Does the selector of nightmare support psuedo classes? segment-boneyard/nightmare#603

Closed

onechiporenko pushed a commit to onechiporenko/ember-models-table that referenced this issue Jul 19, 2016

#106 Remove tests with ':focus' according to ariya/phantomjs#10427

81c9f04

marcysutton mentioned this issue Aug 2, 2016

Add Jest. facebook/create-react-app#250

Merged

miherlosev mentioned this issue Sep 28, 2016

[Testing day 0.9.0-rc1] Script error during hammerhead initialization on phantormjs DevExpress/testcafe-hammerhead#800

Closed

miherlosev mentioned this issue Jul 28, 2017

Exception when testing with PhantomJS DevExpress/testcafe-hammerhead#1250

Closed

markdicksonjr mentioned this issue Sep 25, 2017

Maxiumum call stack error with paper chips in acceptance test adopted-ember-addons/ember-paper#633

Open

markdicksonjr added a commit to markdicksonjr/ember-paper that referenced this issue Sep 29, 2017

Phantom-oriented fix for input.is(‘:focus’) always returning false an…

22d7687

…d causing an infinite loop Addresses ariya/phantomjs#10427

ghost removed 1.x labels Jan 10, 2018

pauln pushed a commit to pauln/ember-paper that referenced this issue May 28, 2018

Phantom-oriented fix for input.is(‘:focus’) always returning false an…

00b13cd

…d causing an infinite loop Addresses ariya/phantomjs#10427

stale bot added the stale label Dec 25, 2019

stale bot closed this as completed Dec 28, 2019

element.webkitMatchesSelector in phantomjs does not report ":focus" accurately #10427

element.webkitMatchesSelector in phantomjs does not report ":focus" accurately #10427

Comments

ryangreenberg commented Mar 14, 2012

Chrome

Safari

PhantomJS 1.4.1

spmason commented Apr 3, 2012

robotarmy commented Apr 6, 2012

philfreo commented Mar 9, 2013

philfreo commented Mar 9, 2013

realyze commented May 3, 2013

caiges commented May 10, 2013

tjvantoll commented May 10, 2013

TheCloudlessSky commented May 13, 2013

camsong commented May 13, 2013

JamesMGreene commented May 14, 2013

Mr0grog commented Jul 10, 2013

ccidral commented Aug 21, 2013

Flamefork commented Aug 28, 2013

ralfthewise commented Sep 12, 2013

roelrz commented Oct 2, 2013

vellotis commented Oct 8, 2013

vincentdieltiens commented Oct 11, 2013

SebiTimeWaster commented Oct 31, 2013

lijunle commented Jan 3, 2014

coledot commented Jan 13, 2014

silvinobarreiros commented Jan 29, 2014

joanna1010 commented Jan 31, 2014

rgl commented Apr 14, 2014

barnomics commented May 7, 2014

lorenooliveira commented Sep 7, 2014

grossadamm commented Oct 10, 2014

vickiccole commented Jan 18, 2016

albinekb commented Jan 26, 2016

tiffanywei commented Feb 8, 2016

emilioplatzer commented Mar 9, 2016

garex commented Apr 25, 2016

workmanw commented Apr 30, 2016

sgress454 commented May 3, 2016

Jevin23 commented May 7, 2016

kryptan commented Jan 3, 2017

vitallium commented Jan 11, 2017 • edited Loading

cleforwen commented Feb 17, 2017

jameswomack commented Mar 3, 2017

DustinAshley commented Jun 16, 2017

Vishwaas commented Sep 25, 2017

srescio commented Oct 29, 2017

stale bot commented Dec 28, 2019

vitallium commented Jan 11, 2017 •

edited

Loading