1

I'm seeing strange behavior with Firefox's handling of tabbing through fields and I can't fathom why. I've reduced the code on my page to a very simple reproduction of the issue.

Tabbing works totally fine until clicking above the input and to the right of the label in the page that is rendered from the following code:

body {
  padding-top: 20px;
}

label {
  position: absolute;
  top: 5px;
}
<label>Click on the right side of this line and tabbing stops working |</label>
<input>

Clicking below or at the level of the input causes tabbing to behave as expected once again. Is this expected behavior and I'm just not understanding something about tabbing, or is it some sort of bug in the Firefox browser?

The Firefox version is 80.0.1 (64-bit) and I am on a desktop computer.

There are no issues in Chrome.

4
  • tabindex is an attribute you put on an element to control the order of tabbing through a document. Commented Oct 1, 2020 at 16:39
  • I'm aware. Is the thrust of that statement that I should use "tabbing" throughout the wording of my question rather than "tabindexing"? It seemed like I might cause less confusion by wording it that way since "tab" has multiple meanings in the context of a browser. Commented Oct 1, 2020 at 16:42
  • Yeah, "tabindex" is not a verb :). Interestingly, if you click to the right of the input tabbing works fine, it's only when you click to the right of the label.... Commented Oct 1, 2020 at 16:45
  • 1
    Seemed extremely weird to me, I reported a Firefox bug: bugzilla.mozilla.org/show_bug.cgi?id=1669016
    – evilpie
    Commented Oct 3, 2020 at 16:04

1 Answer 1

0

You can apply width: 100% to the label, then it works, since it spans the whole line.

body {
  padding-top: 20px;
}

label {
  position: absolute;
  top: 5px;
  width: 100%;
}
<label>Click on the right side of this line and tabbing works |</label>
<input>

4
  • The example I included here isn't really what I have in code. The real code has an element being displayed in a flex container such that it is in the center of the page and the threshold for triggering this weird failure is essentially the entire top half of the page. I'd rather not have a label that spans that entire empty space, if possible. Commented Oct 1, 2020 at 16:45
  • This is a workaround to a specific piece of sample code, not an answer to the question, which is Why?. Commented Oct 1, 2020 at 16:46
  • Well, the answer to "why" is that the label otherwise doesn't extend to the area right of it, so clicking there won't select or focus it. And I added a solution for the sample code, which is expected to reproduce the problem AFAIK...
    – Johannes
    Commented Oct 1, 2020 at 16:48
  • @Johannes Other browsers seem to handle this just fine, though. I wouldn't think I'd have to select or click a specific element on the page in order to preserve expected tabbing behavior. Like if the browser is the active window on my machine, I expect tabbing to, at the very least, cycle through the browser controls (ie: "back", "refresh", "url", etc). It doesn't even do that in Firefox with the code I have above. Commented Oct 1, 2020 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.