Mam div
a z overflow:auto
i zawiera on kilka przyciskow. Strzalka w dol zaznacza kolejny element a strzalka w gore poprzedni. Zastanawiam sie jak moge zrobic tak zeby aktywny element byl zawsze widoczny czyli zeby div
sie scrollowal. Obecnie gdy wyjde poza widoczny zakres div
a to aktywny przycisk przesaje byc wudoczny. Mniej wiecej tak moj komponent wyglada:
export const PopupList = forwardRef(
<T extends unknown>(
{ items, command, render }: PopupListProps<T>,
ref: Ref<unknown>
) => {
const [selectedIndex, setSelectedIndex] = useState(0);
const selectItem = (index: number) => {
const item = items[index];
if (item) {
command(item);
}
};
const upHandler = () => {
setSelectedIndex((selectedIndex + items.length - 1) % items.length);
};
const downHandler = () => {
setSelectedIndex((selectedIndex + 1) % items.length);
};
const enterHandler = () => {
selectItem(selectedIndex);
};
useEffect(() => setSelectedIndex(0), [items]);
useImperativeHandle(ref, () => ({
onKeyDown: ({ event }: { event: KeyboardEvent }) => {
if (event.key === 'ArrowUp') {
upHandler();
return true;
}
if (event.key === 'ArrowDown') {
downHandler();
return true;
}
if (event.key === 'Enter') {
enterHandler();
return true;
}
return false;
},
}));
return (
<div className='popup-list'>
{items.length ? (
items.map((item, index) => (
<button
className={`popup-list-item ${index === selectedIndex ? 'is-selected' : ''}`}
key={index}
onClick={() => selectItem(index)}
>
{render(item)}
</button>
))
) : (
<div className='px-[6px] py-[2px]'>Brak wyników</div>
)}
</div>
);
}
);