0

I have a div element with overflow-y: scroll which wasn't scrolling when I used the keyboard up and down arrows. I finally found a fix which was simply to add to my div tabindex="0". I am okay with this fix, but I was very surprised that if I select text in my div to make it the selected node (proved by using window.getSelection()), arrow keys still didn't work. Apparently the target of my keydown event goes to a parent which has a tabindex.

// DIRECTIONS:
// 1) Run the Fiddle
// 2) Using the mouse select some text in the green box
// 3) Use up and down arrows to scroll
// --- Scrolling was scoped to the parent so the green box doesn't scroll
// --- Add this to the scrollBox div to fix: tabindex="0"

window.addEventListener('keydown', listener);
function listener(evt) {
  console.log(`${evt.code}: ${evt.target.tagName}, ${evt.target.className}`);
  //console.log(window.getSelection());
}
.foreground {
    height: 100%;
    width: 100%;
}
.scroll-box {
    background-color: green;
    overflow: scroll;
    max-height: 200px;
}
<div tabindex="0" class="foreground">
  <div class="scroll-box" id="scrollBox">
    Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test
  </div>
</div>

Why am I seeing this behavior? Why would tabindex take precedent over the focused/selected element when it comes to using keys for scrolling? Is the recommendation then that all of my divs which overflows with scroll or auto also include tabindex?

Thanks

Update: I forgot to mention that I do not control the parent div and cannot remove the parent div's tab index.

Update 2: Even more strange behavior regarding this... elements without tabIndex do not return undefined from tabIndex, instead they always return -1. Therefore if I do document.documentElement.tabIndex = document.documentElement.tabIndex, the value before and after will be -1 when read. Only, afterward the entire document is applying the tabIndex behavior such that scrollable divs cannot be used with keyboard navigation unless they have tabIndex="0".

Is there no way to detect whether or not an element has an implied tabIndex behavior set? What if I wanted to create a function that detected whether or not the container of selected text would scroll, I would have no way of detecting for sure because of the tabIndex read behavior?

Agendum
  • 1,697
  • 1
  • 18
  • 36
  • Take a look at this: https://stackoverflow.com/questions/12410856/enable-div-to-scroll-by-keyboard-without-clicking – Marlom Jul 18 '21 at 07:12
  • @Agendum I removed `tabindex="0"` and keyboard up and down key scrolling the green box. It seems it works correctly – Alireza Ahmadi Jul 18 '21 at 07:48
  • I should have mentioned I don't control the parent div, and cannot remove the parent's tabindex. Thanks! – Agendum Jul 18 '21 at 08:24
  • Thanks @Marlom, but I did show in my question I can add tabindex to fix it. My question is why am I seeing the behavior where when I select text the arrow keys don't work without tabindex. And also what is the recommendation -- always have a tabindex on a scroll-capable div? – Agendum Jul 18 '21 at 08:31
  • The scrolling isn't work with arrow keys on my end. It's chrome browser at Windows 10. – jacobkim Jul 18 '21 at 10:19
  • `tabindex ="0"` let the tag selected and it makes a user can control currently selected tag with keyboard shortcut. So it lets users directly access tags without a mouse. But I wonder how `window.getSelection()` is related with `tabindex="0"`? – jacobkim Jul 18 '21 at 10:22
  • `getSelection` is about text selection, it is not related to `tabindex`. @Agendum Basically `tabindex` can be used to determine if an element can receive focus or not. Focusable elements can have user interaction through keyboards. – Marlom Jul 19 '21 at 09:13

0 Answers0