Why Did Arrow Keys Stop Working? Uncovering the Tabindex Trap in Ant Design Tabs

1. Customer Feedback

A front‑end engineer named Xiao Liu sees a client report that the page no longer scrolls with the arrow keys, while mouse wheel and scrollbar work fine.

“The page doesn’t respond to arrow keys any more!”

The client adds that the issue appeared suddenly, without any recent deployment.

2. Initial Investigation

Liu first rules out compatibility problems and confirms the behavior: mouse wheel and scrollbar work, arrow keys do not.

“This isn’t a common issue…”

He checks recent release notes and finds no relevant changes. Locally the page works, but the production version does not, suggesting the problem lies in the runtime environment.

He suspects the newly introduced micro‑frontend multi‑tab caching architecture might be interfering.

3. Pinpointing the Culprit

Through debugging, Liu narrows the scope to the Ant Design Tabs component. He creates a minimal demo that reproduces the issue: when a page is placed inside a Tabs container, the arrow keys stop working.

“The Tabs component is the culprit!”

Researching Ant Design’s GitHub issues, he discovers that each TabPane is rendered with tabindex=0 to manage focus, which can unintentionally capture keyboard events.

When a non‑focusable element is clicked, focus falls onto the outer div with tabindex=0, hijacking the arrow keys and preventing page scrolling.

4. Problem Principle Analysis

1. Focus and Focusable Elements

Focus is the core mechanism for keyboard interaction, determining which element receives input.

HTML elements are either focusable or not. Common focusable elements include <a href>, <link href>, <button>, <input> (except type="hidden"), <select>, and <textarea>. These support keyboard focus via the Tab key or programmatic element.focus(). The current focused element can be inspected with document.activeElement:

document.querySelector("a").focus();
console.log(document.activeElement); // current focused element

2. What Is tabindex ?

The tabindex attribute controls whether an element can receive focus and its order in the Tab navigation sequence.

Setting tabindex on a non‑focusable element makes it focusable.

Example:

<div tabindex="0">Non‑focusable element, now focusable</div>

3. Using tabindex

The maximum value should not exceed 32767; the default is 0.

tabindex="0"

: element is focusable and follows DOM order for Tab navigation. tabindex="-1": element cannot be reached via Tab, but can be focused programmatically. tabindex="1" or higher: element becomes focusable and its Tab order is manually specified, which is considered an anti‑pattern and should be avoided.

In practice, only 0 and -1 should be used.

5. Solutions and Practices

Liu proposes several remedies:

Remove the tabindex attribute from the Tabs component.

Pros: Arrow keys work immediately.

Cons: The container can no longer receive focus via Tab.

Set tabindex="0" on scrollable containers.

Pros: Containers become focusable, allowing arrow‑key scrolling after Tab focus.

Cons: Requires adding tabindex to every scrollable container, which is costly.

After evaluation, Liu chooses to remove tabindex from the Tabs component, minimizing impact while preserving normal arrow‑key behavior throughout the page.

6. Conclusion

The mysterious loss of arrow‑key scrolling was caused by a tiny tabindex attribute on Ant Design Tabs. The key takeaways are:

Keyboard focus management is crucial for both mouse and keyboard users, as well as accessibility.

Use tabindex="0" for containers that need focus and tabindex="-1" for script‑only focus; avoid values greater than 0.

Leverage community resources—many “odd” issues have already been discussed and solved.

Details decide experience; a small attribute can change the whole interaction.