Keep the armed combobox row visible while scrolling
The dropdown caps at 264px and a category registry easily exceeds it; arrow navigation now scrolls the armed row into view with block: nearest so the list follows the keyboard in both directions.
This commit is contained in:
@@ -158,6 +158,14 @@ export function Combobox({
|
|||||||
create && filter && !exact && !disabled ? create(query.trim()) : [];
|
create && filter && !exact && !disabled ? create(query.trim()) : [];
|
||||||
const total = shown.length + creations.length;
|
const total = shown.length + creations.length;
|
||||||
const cursor = active < total ? active : -1;
|
const cursor = active < total ? active : -1;
|
||||||
|
// The dropdown scrolls at 264px; keep the armed row visible while
|
||||||
|
// arrowing through a long category list.
|
||||||
|
useEffect(() => {
|
||||||
|
if (cursor < 0) return;
|
||||||
|
document
|
||||||
|
.getElementById(`${listID}-${cursor}`)
|
||||||
|
?.scrollIntoView({ block: "nearest" });
|
||||||
|
}, [cursor, listID]);
|
||||||
const pick = (v: string) => {
|
const pick = (v: string) => {
|
||||||
onChange(v);
|
onChange(v);
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
|
|||||||
Reference in New Issue
Block a user