1710108 - Search field on lcbo.com loses focus with unknown cause

Status: NEW

(GeckoView :: IME, defect, P3)

Description

[Dennis Schubert [:denschub][OOO, back Jan 12]]

We've been getting reports via webcompat.com about the broken search functionality on lcbo.com, the STR:

1. Open https://www.lcbo.com/webapp/wcs/stores/servlet/en/lcbo on GVE or Fenix
2. Open the sidebar with the three-bar icon in the top left corner
3. Try typing something into the search bar

You'll notice the search bar losing focus and regaining focus many times in quick succession, and the virtual keyboard popping up and down over and over again.

The flickering comes from the fact that a script is re-focussing the input in fixed time intervals, I have described that in my comment in the webcompat bug. However, what I can't figure out is why the focus loses focus in the first place.

Interestingly, in most cases where the input loses focus, no blur event is fired as far as I can tell, so something weird is going on.

Not sure if this is a GeckoView issue, a Gecko issue, or something the site is doing wrong, but I'd appreciate any assistance figuring that out.

Comment 1

[Emily Toop (:fluffyemily)]

Makoto can you take a quick look at this please?

Comment 2

[Makoto Kato [:m_kato]]

Yes, I look this

Comment 3

[Makoto Kato [:m_kato]]

I need more investigation for this because I can reproduce with Windows (Surface Pro with touch).

This site calls handleFocus(event) on touchstart event listener. I suspect this script.

Comment 4

[Makoto Kato [:m_kato]]

I guess that this depends on resize event handler of their script.

Even if I use Edge on Surface Pro, focus is lost when tapping search box although virtual keyboard isn't closed. Then user cannot input any string on search box. I guess site bug.

Comment 5

[Makoto Kato [:m_kato]]

Dennis, do you contact this issue to this site owner? This issue occurs on Edge with Windows tablet mode too. When removing all resize event handler, this works expected on Edge.

Comment 6

[Makoto Kato [:m_kato]]

Also, when user agent has Android, onresize handler calls input.focus() several times using setTimeout... I cannot understand why...

Comment 7

[Makoto Kato [:m_kato]]

Even if resize event handler lost focus, the following script seems to be run. This depends on resize, focus and blur event timing issue.

    if(-1<navigator.userAgent.toLowerCase().indexOf("android")) {
        var i=n("input#SimpleSearchForm_SearchTerm");
        if(i.length) {
            window.resizeHandler=window.onresize,
            window.onresize=function(){};
            var o = function(n){
                window.setTimeout(function(){
                    r=!0,
                    i.focus(),
                    r=!1
                },n)
            },
            e=!1,
            r=!1,
            t=!1;
            i.on("focus",function(){
                e=!0,
                r||(o(10), o(300), o(500))
            }),
            i.on("blur",function(){
                t ? (e=!0,r||(o(10), o(300), o(500))) :
                    e=!1
                }),
            window.onresize=function(){
                t=!0,
                e ? (o(10),o(300),o(500)) :
                    window.resizeHandler(),
                t=!1
            }
        }
    }

Comment 8

[Dennis Schubert [:denschub][OOO, back Jan 12]]

Dennis, do you contact this issue to this site owner?

Please excuse the very long delay here. I've sent them a message.

Comment 9

[Chris Peterson [:cpeterson]]

I can still reproduce this bug, or at least a problem very similar to it.

In Chrome on Android (and Safari on iOS), tapping the magnifying glass icon shows a search text field. In Fenix, a focus ring surrounds the icon, but no search text field opens.

Comment 10

[Chris Peterson [:cpeterson]]

Moving some focus bugs to the new GeckoView::IME component.