Popup: "highlight" flash during popup show on Android 4.1, 4.2

[sterlingnelson]

Description/current behavior
Before a popup finishes showing in Android 4.1 or 4.2, there is a brief orange or blue "highlight" style flash in the area that the popup is to occupy.

"Expected" (Hoped for) behavior
No transient flash occurs while opening the popup.

Affected Platforms
We're building a Cordova app, and have produced this behavior on the Android stock browser on:

1. a Samsung Galaxy Tab S3 running Android 4.1.2 produces an orange flash in both WebView and the "Internet" browser app.
2. a Kindle Fire HDX 7" running FireOS 3 (Android 4.2.2 fork) produces a blue flash in WebView only (browser app is Silk)

We have not observed this behavior in other browsers. We are using jQuery Core 1.11.0 and jQuery Mobile 1.4.0 for our project.

JSBin
Our Samsung device reproduces the described behavior in its stock browser using the current JSBin template.
http://jsbin.com/huvoraba/27

[ldeluca]

I tried reproducing with an Apache Cordova app. Cordova version 3.5 on my android Samsung Galaxy S4. I do not see an orange or blue "highlight" flash.

[SterlingAtXM]

Thanks for taking the time to test and respond!

We don't have an Android 4.4 device here, but I think I tested on a Nexus running 4.4 and did not see the flashes there either. I have been assuming it's a difference between the KitKat(Chromium based) and pre KitKat WebViews. I've only seen it in 4.1 and 4.2, although I haven't had the chance to test earlier versions.

Edit: Sorry, should have said, we're running Cordova 3.5.0 here as well.

[ldeluca]

I was able to test in browserStack and I see the issue you were referring to now. I uploaded a quick video to youtube showing the blue flash. I tested on a 4.2 webview for android. https://www.youtube.com/watch?v=KnmTzKLw8ME&feature=youtube_gdata_player

[ldeluca]

So my sample page has two types of popups. The first is a button based popup and the second is a link based. The button is the one that shows the blue flash. The link version does not. I noticed that there was a difference in the use of class="popup" so I updated my test page to test to see if that would make the button flash. It still flashed without that class on a button popup. I also added a link button to see if there would be a blue flash on a link with the class set. It does NOT flash. So my conclusion is: The flash ONLY occurs on button based popups, NOT link based. During the link, the link itself glows blue as if it were selected before the popup. With button based the popup glows blue.

[gabrielschulhof]

@ldeluca OK, excellent observation. If this is the case, then popups must indeed be opened via the pagecontainer "change" method, because that introduces sufficient "distance" (in terms of asynchronicity) between the click event and the opening of the popup. I implemented that for the custom selectmenu in b0a802d.

[gabrielschulhof]

... or so I've thought ... I've tried simulating what we do during the link handling with custom code in http://jsbin.com/huvoraba/158/, and I find that both the custom code and jQuery Mobile's link handling cause the blue flash: https://www.youtube.com/watch?v=zlYq65zjuj0

[gabrielschulhof]

@ldeluca if you wanna do a PR to fix this issue, you wanna look at the effect of removing

https://github.com/jquery/jquery-mobile/blob/master/js/widgets/popup.js#L604

Try removing it or unwinding the stack before focusing.

The reason for the .focus() call there is to put the focus on an element (the popup's container div) that will be a valid element in the focus-restricted environment that the popup produces. It produces this environment by handling the focusin event at the document level while it's open

https://github.com/jquery/jquery-mobile/blob/master/js/widgets/popup.js#L289

and transferring focus to an element inside the popup if it finds that an element that is not the child of the popup container has received focus.

To make sure your solution works correctly, you must test it on a page that includes a text input which can receive the focus by repeatedly pressing the Tab key on the page and a popup. Whenever the popup is on the screen, the text input must not be reachable via either the mouse or the keyboard.

Note that you can still trick Firefox (and maybe Chrome) into giving the text input focus by typing some text into it, then opening the popup, then searching on the page for the text you've typed. This works especially well in Firefox because of its type-to-search feature. There's no way around this (that I know of) so don't worry if that breaks the focus restriction.

[gabrielschulhof]

The video shows a browserstack instance of a Samsung Galaxy Note II running Android 4.1.

[ldeluca]

@gabrielschulhof I tried removing the call to _desiredCoords and tested but am still seeing the blue flash. Removing the _desiredCoords call just put the popup near the button instead of at the bottom of the page. Seems like a different issue?

It looks like the issue is more about the style that is being applied. The blue glow must be a :focus css style somewhere is my guess. You sure line https://github.com/jquery/jquery-mobile/blob/master/js/widgets/popup.js#L604 is the right spot to be looking?

[gabrielschulhof]

@ldeluca I'm sooo sorry! I mistyped! I meant this:

https://github.com/jquery/jquery-mobile/blob/master/js/widgets/popup.js#L642

That is, the line that calls .focus() on the popup container element after the popup has finished opening.

I'm thinking though that the line cannot be removed because whatever element is focused before the popup opens cannot remain focused, otherwise we cannot claim that the popup restricts focus while open.

Trying different values for the popup containers focus style might not be such a bad idea though!

[ldeluca]

Looking into this from a styling perspective. Looks like there are similar concerns out on the innerwebs :) https://forum.jquery.com/topic/blue-highlight-over-popup

only happens to Button popups

[ldeluca]

@gabrielschulhof when I add a timeout before the call to .focus then i don't see the blue flash anymore:

setTimeout(function() {
this._ui.container.attr( "tabindex", "0" ).focus();
}, 300);

Is my solution and it appears to work but running grunt test shows some failures.

[ldeluca]

I used an alternative solution per @gabrielschulhof suggestion to blur out the other elements that are not within the popup. I updated the test case to verify that an input field that has focus before the popup becomes blurred after the popup gains focus. The pull request can be found here: #7757

[SterlingAtXM]

Just a quick thanks to @ldeluca and @gabrielschulhof. I appreciate the time you guys are putting in!