Flow: Firefox 63: Focus Problem (keyboard navigation using 'tab')

[knoobie]

Using only tab to navigate in an application should be possible without any problems. The focus leaves the application and goes to the browser window after the 'Neue Suche' button. This should only happen if there is no other element on the page that could get the focus.

I think it's related to the button group. Removing the buttons fixes the problem.

Current behaviour:

• not all focusable elements are reachable while pressing tab

Expected behaviour

• all focusable elements are reachable while pressing tab

Env

OS: Linux
Browser: Firefox 63.0b13 (older Firefox Instances or Chrome is not affected)
Vaadin: 11.0.1 (development and production)

Video

vaadin-focus-problem.webm.tar.gz

Code to reproduce

flow-focus-bug.tar.gz

[gilberto-torrezan]

There's a similar issue with checkbox: https://github.com/vaadin/vaadin-checkbox/issues/128

[OlliTietavainenVaadin]

Looks like this is easy to reproduce on Firefox 65:

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        TextField one = new TextField("One");
        TextField two = new TextField("two");
        add(one, two);
        one.focus();
    }
}

On Chrome, open the app and press tab once -> focus moves to the second TextField as expected. On FF65, pressing tab will focus the browser's URL bar.

[OlliTietavainenVaadin]

The behavior also breaks in a similar way with Buttons.

[Klaudeta]

The behavior breaks in any case when custom elements are added from Flow into the light dom of another custom element. While navigation works if using tab+shift.

[Klaudeta]

Sample code to reproduce the issue excluding Flow as being the cause of the issue. The actual code uses vaadin-text-field as the focusable custom element but the problem is still there also with paper-input element.

firefox-focus-issue.zip

[pleku]

Blocked by https://github.com/vaadin/vaadin-text-field/issues/318

[tomivirkki]

This is a Firefox issue and can be reproduced with the following example (built with native APIs): https://jsbin.com/niwosobapi/edit

The bug has been reported at https://bugzilla.mozilla.org/show_bug.cgi?id=1528686 We'll take a look if there's a workaround that could be used in Vaadin components.

[knoobie]

https://jsbin.com/niwosobapi/edit

FYI: Using Firefox 66.0b8 (OS: Ubuntu) the problem can't be reproduced with your example. Could be fixed in between 65 and 66?

[tomivirkki]

Sounds promising 👍 Hopefully the issue is gone after 66 release.

[knoobie]

In my Vaadin(12.0.6) application is the problem solved as well. Looks like Firefox has fixed it in between 65 and the latest 66 beta.

[Fr33z3m4n]

Unfortunately, the workaround does not work if you use 2 FormLayouts in a DIV Component. It will jump back to the address bar after the last text field from the first form.

[imneeazmi]

This issue still persists on Vaadin 13.0.0 in Firefox. The tab isn't sequential. You guys can try out the sample project here.

[steffen-harbich-cognitum]

I have problems with pressing tab in Vaadin 14.0.15 and Firefox 71. My form has multiple subsequent text fields but pressing tab key once hides the cursor and again shows cursor in initial text field. Did I do something wrong or is this a regression?

[OlliTietavainenVaadin]

@steffen-harbich-itc you should open a new ticket with steps to reproduce.

[web-padawan]

@steffen-harbich-itc please check if the vaadin-text-field demos work for you:
https://cdn.vaadin.com/vaadin-text-field/2.5.3/demo/

If you can reproduce a bug, please submit an issue to https://github.com/vaadin/vaadin-text-field

[steffen-harbich-cognitum]

@OlliTietavainenVaadin, @web-padawan, opened a new ticket #7107 because I could reproduce the issue under some circumstances. In general pressing tab is working.