Inconsistent Focus Behavior with Lists

[richardbann]

Provide a general summary of the issue here

The issue can be demonstrated in the Storybook - ListView - default.

• Click into "focus before" and tab into the ListView. The first item is focused. Now tab into "focus after" and shift-tab back. Again, the first item is focused.
• Now make sure the last active item ("Adobe Illustrator") is focused in the List, and do the above steps again. When you shift-tab back, the checkbox is focused, not the item.

🤔 Expected Behavior?

The item should be focused in the second scenario, not the checkbox.

😯 Current Behavior

Storybook link

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

See summary. Also happens in the docs

Version

main branch

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[richardbann]

After looking into the code: shift-tab moves focus to the last item's button, and useSelectableCollection kicks in. The onFocus handler deals with most cases, except for one: The browser moves focus to the last button and the last item is focusedKey. Because of the test

if (!element.contains(document.activeElement))

the focus remains on the button.

One possible solution is to change the above test to:

if (!element.contains(document.activeElement) || !e.relatedTarget || (ref.current && !ref.current.contains(e.relatedTarget)))

This also checks if the focus is "coming from outside" the list and if so, the focus is moved to the right item (even if the active element is inside the item).

I have tested this and found no issues, but this is located deeply enough to require more consideration.

[LFDanLu]

Thanks for the issue. We'll most likely be revisiting this as a part of a push to support edit mode/interactive elements within grids, will update this when we settle on desired behavior