diff --git a/public/app/core/components/NestedFolderPicker/NestedFolderList.tsx b/public/app/core/components/NestedFolderPicker/NestedFolderList.tsx index 567d44961c5..839c9f04231 100644 --- a/public/app/core/components/NestedFolderPicker/NestedFolderList.tsx +++ b/public/app/core/components/NestedFolderPicker/NestedFolderList.tsx @@ -80,6 +80,17 @@ function Row({ index, style: virtualStyles, data }: RowProps) { [item, onSelectionChange] ); + const handleKeyDown = useCallback( + (ev: React.KeyboardEvent) => { + // Expand/collapse folder on arrow keys + if (foldersAreOpenable && (ev.key === 'ArrowRight' || ev.key === 'ArrowLeft')) { + ev.preventDefault(); + onFolderClick(item.uid, ev.key === 'ArrowRight'); + } + }, + [item.uid, foldersAreOpenable, onFolderClick] + ); + if (item.kind !== 'folder') { return process.env.NODE_ENV !== 'production' ? ( @@ -98,6 +109,7 @@ function Row({ index, style: virtualStyles, data }: RowProps) { name="folder" checked={item.uid === selectedFolder} onChange={handleRadioChange} + onKeyDown={handleKeyDown} />
@@ -107,6 +119,8 @@ function Row({ index, style: virtualStyles, data }: RowProps) {