-
Notifications
You must be signed in to change notification settings - Fork 112
Open
Description
Is your feature request related to a problem? Please describe.
The moveToNext
and moveToPrevious
functions stop when the active panel is the last one, and there's no additional panel to move the focus to.
Describe the solution you'd like
Add an option that enables looping—so when the focus is the last panel, it moves to the first panel, and vice versa.
api.moveToPrevious({ includePanel: true, loop: true });
api.moveToNext({ includePanel: true, loop: true });
Describe alternatives you've considered
Here's an example of a shortcut implementation in React:
useEffect(() => {
if (!api) return;
const handleKeyDown = (e: KeyboardEvent) => {
const activePanel = api.activePanel;
if (!activePanel) return;
const [first, last] = [api.panels.at(0), api.panels.at(-1)];
if (e.ctrlKey && e.altKey && e.key === 'ArrowLeft') {
activePanel.id === first?.id ? last?.focus() : api.moveToPrevious({ includePanel: true });
}
if (e.ctrlKey && e.altKey && e.key === 'ArrowRight') {
activePanel.id === last?.id ? first?.focus() : api.moveToNext({ includePanel: true });
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [api]);
Additional context
The concepts of loop
and it's behavior can be found in floating-ui.
mcdenhoed
Metadata
Metadata
Assignees
Labels
No labels