-
-
Notifications
You must be signed in to change notification settings - Fork 326
Closed
Labels
bugSomething isn't workingSomething isn't working
Description
I have already checked through the existing bug reports and found no duplicates
- Yes
App Version
development
Music Server and Version
navidrone 0.59
What local environments are you seeing the problem on?
Desktop Windows
What happened?
Hello,
I would love to be able to navigate using arrow keys in an item tables list. Such that I can select song with arrow keys and play it with Enter.
I think there is already code for this, but it doesn't work for me.
feishin/src/renderer/components/item-list/item-table-list/item-table-list.tsx
Lines 1739 to 1856 in 72475fb
| const handleKeyDown = useCallback( | |
| (e: React.KeyboardEvent<HTMLDivElement>) => { | |
| if (!enableSelection) return; | |
| if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return; | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| const selected = internalState.getSelected(); | |
| const validSelected = selected.filter(hasRequiredStateItemProperties); | |
| let currentIndex = -1; | |
| if (validSelected.length > 0) { | |
| const lastSelected = validSelected[validSelected.length - 1]; | |
| currentIndex = data.findIndex( | |
| (d) => hasRequiredItemProperties(d) && d.id === lastSelected.id, | |
| ); | |
| } | |
| let newIndex = 0; | |
| if (currentIndex !== -1) { | |
| newIndex = | |
| e.key === 'ArrowDown' | |
| ? Math.min(currentIndex + 1, data.length - 1) | |
| : Math.max(currentIndex - 1, 0); | |
| } | |
| const newItem: any = data[newIndex]; | |
| if (!newItem) return; | |
| // Handle Shift + Arrow for incremental range selection (matches shift+click behavior) | |
| if (e.shiftKey) { | |
| const selectedItems = internalState.getSelected(); | |
| const validSelectedItems = selectedItems.filter(hasRequiredStateItemProperties); | |
| const lastSelectedItem = validSelectedItems[validSelectedItems.length - 1]; | |
| if (lastSelectedItem) { | |
| // Find the indices of the last selected item and new item | |
| const lastRowId = lastSelectedItem.rowId; | |
| const lastIndex = data.findIndex((d) => { | |
| const rowId = extractRowId(d); | |
| return rowId === lastRowId; | |
| }); | |
| if (lastIndex !== -1 && newIndex !== -1) { | |
| // Create range selection from last selected to new position | |
| const startIndex = Math.min(lastIndex, newIndex); | |
| const stopIndex = Math.max(lastIndex, newIndex); | |
| const rangeItems: ItemListStateItemWithRequiredProperties[] = []; | |
| for (let i = startIndex; i <= stopIndex; i++) { | |
| const rangeItem = data[i]; | |
| const stateItem = getStateItem(rangeItem); | |
| if (stateItem && extractRowId(stateItem)) { | |
| rangeItems.push(stateItem); | |
| } | |
| } | |
| // Add range items to selection (matching shift+click behavior) | |
| const currentSelected = internalState.getSelected(); | |
| const validSelected = currentSelected.filter( | |
| hasRequiredStateItemProperties, | |
| ); | |
| const newSelected: ItemListStateItemWithRequiredProperties[] = [ | |
| ...validSelected, | |
| ]; | |
| rangeItems.forEach((rangeItem) => { | |
| const rangeRowId = extractRowId(rangeItem); | |
| if ( | |
| rangeRowId && | |
| !newSelected.some( | |
| (selected) => extractRowId(selected) === rangeRowId, | |
| ) | |
| ) { | |
| newSelected.push(rangeItem); | |
| } | |
| }); | |
| // Ensure the last item in selection is the item at newIndex for incremental extension | |
| const newItemListItem = getStateItem(newItem); | |
| if (newItemListItem && extractRowId(newItemListItem)) { | |
| const newItemRowId = extractRowId(newItemListItem); | |
| // Remove the new item from its current position if it exists | |
| const filteredSelected = newSelected.filter( | |
| (item) => extractRowId(item) !== newItemRowId, | |
| ); | |
| // Add it at the end so it becomes the last selected item | |
| filteredSelected.push(newItemListItem); | |
| internalState.setSelected(filteredSelected); | |
| } | |
| } | |
| } else { | |
| // No previous selection, just select the new item | |
| const newItemListItem = getStateItem(newItem); | |
| if (newItemListItem && extractRowId(newItemListItem)) { | |
| internalState.setSelected([newItemListItem]); | |
| } | |
| } | |
| } else { | |
| // Without Shift: select only the new item | |
| const newItemListItem = getStateItem(newItem); | |
| if (newItemListItem && extractRowId(newItemListItem)) { | |
| internalState.setSelected([newItemListItem]); | |
| } | |
| } | |
| const offset = calculateScrollTopForIndex(newIndex); | |
| scrollToTableOffset(offset); | |
| }, | |
| [ | |
| data, | |
| enableSelection, | |
| internalState, | |
| calculateScrollTopForIndex, | |
| scrollToTableOffset, | |
| extractRowId, | |
| getStateItem, | |
| ], | |
| ); |
I can select a song in table using mouse but not with arrow keys. When a song is selected how am can I play it with the keyboard? Is this feature under development?
Best regards
Raphaël
Steps to reproduce
- click arrow up arrow key on any BaseItemTableList
- it should select next/previous row, it doesn't
Relevant log output
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't working