Can't switch to "Password" field on "Sign in" form using "Tab" button

[MurzNN]

Steps to reproduce

On https://develop.element.io/#/login form I can't jump to "Password" button using keyboard "Tab" key, after I've filled the "Username" button, when I press "Tab" - spinner is coming and takes away the focus from password field, here is screencast:
https://user-images.githubusercontent.com/336662/145448373-85135c0d-7ec4-4da0-a31a-7e03ae806f35.mp4

Same problem is when I try to autofill the username and password, using some password manager (eg Bitwarden).

Outcome

What did you expect?

I expect to fill password via standard way.

What happened instead?

I need to use a mouse to set focus to Password input field.

Operating system

Ubuntu

Browser information

Firefox 94

URL for webapp

develop.element.io

Application version

Element version: 0a5aded-react-68ac5785770d-js-4e9fe8f53fd2 Olm version: 3.2.3

Homeserver

matrix.org

Will you send logs?

No

[kittykat]

Moved to P1 because it's an a11y issue on login - have not verified

[germain-gg]

This is only happening when tabbing away from the login input having a full matrix ID.
There is an event listener set on blur that checks if the homeserver URL is specified and will try to update the homeserver state. Doing so confuses the roving tab index and the focus is lost.

The same without @ and :matrix.org works fine!

[t3chguy]

Doing so confuses the roving tab index and the focus is lost.

We shouldn't be using roving tab indexes on forms though?

[t3chguy]

Yeah neither field has tabIndex=-1 so this isn't a roving behaviour:

[t3chguy]

I think this is because when you enter a full MXID then blur, everything gets disabled and the disabled input you just tabbed to loses focus.

Edit: confirmed this to be the reason