Make sure there is a roving tab set if the last one has been removed from the list.

This commit is contained in:
David Langley 2025-07-30 14:47:27 +01:00
parent 561920cb8d
commit 4e169cfa99

View File

@ -92,13 +92,6 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
/** Whether the list is currently focused */
const [isFocused, setIsFocused] = useState<boolean>(false);
// Update the key-to-index mapping whenever items change
useEffect(() => {
if (items.length && !tabIndexKey) {
setTabIndexKey(getItemKey(items[0]));
}
}, [items, getItemKey, tabIndexKey]);
// Update the key-to-index mapping whenever items change
useEffect(() => {
const newKeyToIndexMap = new Map<string, number>();
@ -109,6 +102,13 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
setKeyToIndexMap(newKeyToIndexMap);
}, [items, getItemKey]);
// Ensure the tabIndexKey is set if there is none already or if the existing key is no longer displayed
useEffect(() => {
if (items.length && (!tabIndexKey || keyToIndexMap.get(tabIndexKey) === undefined)) {
setTabIndexKey(getItemKey(items[0]));
}
}, [items, getItemKey, tabIndexKey, keyToIndexMap]);
/**
* Scrolls to a specific item index and sets it as focused.
* Uses Virtuoso's scrollIntoView method for smooth scrolling.
@ -254,8 +254,6 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
return (
<Virtuoso
aria-rowcount={props.items.length}
aria-colcount={1}
tabIndex={props.tabIndex || undefined} // We don't need to focus the container, so leave it undefined by default
scrollerRef={scrollerRef}
ref={virtuosoHandleRef}