fix: shift-click multi select in favorites, shares and trash views

packages/web-app-files/src/composables/keyboardActions/useKeyboardFileNavigation.ts

@@ -28,6 +28,9 @@ export const useKeyboardFileNavigation = (
   )
 
   keyActions.bindKeyAction({ primary: Key.Space }, () => {
+    if (!unref(latestSelectedId)) {
+      return
+    }
     resourcesStore.toggleSelection(unref(latestSelectedId))
   })
 
@@ -181,6 +184,10 @@ export const useKeyboardFileNavigation = (
   }
 
   const getVerticalProperties = (viewDirection: Direction) => {
+    if (!unref(latestSelectedId)) {
+      return {}
+    }
+
     const elementsInRow = getElementsInRow()
     if (elementsInRow === -1) {
       return {}

packages/web-app-files/src/views/Favorites.vue

@@ -137,12 +137,18 @@ import {
   useRouteQuery,
   getLastModifiedFilterOptions,
   getMediaTypeFilterOptions,
-  SearchMediaTypeFilterOption
+  SearchMediaTypeFilterOption,
+  useKeyboardActions
 } from '@opencloud-eu/web-pkg'
 import QuickActions from '../components/FilesList/QuickActions.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
 import FilesViewWrapper from '../components/FilesViewWrapper.vue'
 import { useResourcesViewDefaults } from '../composables'
+import {
+  useKeyboardFileNavigation,
+  useKeyboardFileMouseActions,
+  useKeyboardFileActions
+} from '../composables/keyboardActions'
 import { folderViewsFavoritesExtensionPoint } from '../extensionPoints'
 import { useGettext } from 'vue3-gettext'
 import { v4 as uuidV4 } from 'uuid'
@@ -212,6 +218,11 @@ const {
   folderViewExtensionPoint: folderViewsFavoritesExtensionPoint
 })
 
+const keyActions = useKeyboardActions()
+useKeyboardFileNavigation(keyActions, paginatedResources, viewMode)
+useKeyboardFileMouseActions(keyActions, viewMode)
+useKeyboardFileActions(keyActions)
+
 const { triggerDefaultAction } = useFileActions()
 
 const { loadPreview, dropPreview } = useLoadPreview(viewMode)

packages/web-app-files/src/views/shares/SharedViaLink.vue

@@ -81,11 +81,16 @@ import {
   AppBar,
   Pagination,
   useGetMatchingSpace,
-  ContextActions
+  ContextActions,
+  useKeyboardActions
 } from '@opencloud-eu/web-pkg'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import { useResourcesViewDefaults } from '../../composables'
+import {
+  useKeyboardFileNavigation,
+  useKeyboardFileMouseActions
+} from '../../composables/keyboardActions'
 import { computed, onMounted, ref, unref } from 'vue'
 import SharesNavigation from '../../../src/components/AppBar/SharesNavigation.vue'
 import { OutgoingShareResource } from '@opencloud-eu/web-client'
@@ -140,6 +145,10 @@ const filteredItems = computed(() => {
   return unref(paginatedResources)
 })
 
+const keyActions = useKeyboardActions()
+useKeyboardFileNavigation(keyActions, filteredItems, viewMode)
+useKeyboardFileMouseActions(keyActions, viewMode)
+
 resourcesStore.$onAction((action) => {
   if (action.name !== 'updateResourceField') {
     return

packages/web-app-files/src/views/shares/SharedWithMe.vue

@@ -89,6 +89,10 @@
 <script setup lang="ts">
 import Fuse from 'fuse.js'
 import { useResourcesViewDefaults } from '../../composables'
+import {
+  useKeyboardFileNavigation,
+  useKeyboardFileMouseActions
+} from '../../composables/keyboardActions'
 
 import {
   AppLoadingSpinner,
@@ -98,7 +102,8 @@ import {
   useAppsStore,
   useResourcesStore,
   UserAvatar,
-  createLocationShares
+  createLocationShares,
+  useKeyboardActions
 } from '@opencloud-eu/web-pkg'
 import { AppBar, ItemFilterInline } from '@opencloud-eu/web-pkg'
 import { queryItemAsString, useRouteQuery } from '@opencloud-eu/web-pkg'
@@ -207,6 +212,10 @@ const { sortBy, sortDir, items, handleSort } = useSort({
   fields: sortFields
 })
 
+const keyActions = useKeyboardActions()
+useKeyboardFileNavigation(keyActions, items, viewMode)
+useKeyboardFileMouseActions(keyActions, viewMode)
+
 const { getMatchingSpace } = useGetMatchingSpace()
 
 const selectedShareSpace = computed(() => {

packages/web-app-files/src/views/shares/SharedWithOthers.vue

@@ -109,12 +109,17 @@ import {
   Pagination,
   useGetMatchingSpace,
   ContextActions,
-  ItemFilter
+  ItemFilter,
+  useKeyboardActions
 } from '@opencloud-eu/web-pkg'
 import { uniq } from 'lodash-es'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import { useResourcesViewDefaults } from '../../composables'
+import {
+  useKeyboardFileNavigation,
+  useKeyboardFileMouseActions
+} from '../../composables/keyboardActions'
 import { computed, unref, ref, onMounted } from 'vue'
 import SharesNavigation from '../../components/AppBar/SharesNavigation.vue'
 import { OutgoingShareResource, ShareTypes } from '@opencloud-eu/web-client'
@@ -205,6 +210,10 @@ const filteredItems = computed(() => {
   })
 })
 
+const keyActions = useKeyboardActions()
+useKeyboardFileNavigation(keyActions, filteredItems, viewMode)
+useKeyboardFileMouseActions(keyActions, viewMode)
+
 resourcesStore.$onAction((action) => {
   if (action.name !== 'updateResourceField') {
     return

packages/web-app-files/src/views/spaces/GenericTrash.vue

@@ -90,12 +90,17 @@ import {
   NoContentMessage,
   useDocumentTitle,
   useUserStore,
-  useResourcesStore
+  useResourcesStore,
+  useKeyboardActions
 } from '@opencloud-eu/web-pkg'
 
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import { useResourcesViewDefaults } from '../../composables'
+import {
+  useKeyboardFileNavigation,
+  useKeyboardFileMouseActions
+} from '../../composables/keyboardActions'
 import { useFileActionsEmptyTrashBin } from '../../composables'
 import { isProjectSpaceResource, SpaceResource, TrashResource } from '@opencloud-eu/web-client'
 import { folderViewsTrashExtensionPoint } from '../../extensionPoints'
@@ -134,6 +139,10 @@ const {
   sortFields
 } = resourcesViewDefaults
 
+const keyActions = useKeyboardActions()
+useKeyboardFileNavigation(keyActions, paginatedResources, viewMode)
+useKeyboardFileMouseActions(keyActions, viewMode)
+
 const isEmpty = computed(() => unref(resourcesViewDefaults.paginatedResources).length < 1)
 
 const { actions: emptyTrashBinActions } = useFileActionsEmptyTrashBin()

packages/web-app-files/tests/unit/composables/keyboardActions/useKeyboardFileNavigation.spec.ts

@@ -93,4 +93,43 @@ describe('useKeyboardFileNavigation', () => {
     expect(store.selectedIds).toEqual(['1'])
     expect(selectionStates.every((state) => state.length > 0)).toBe(true)
   })
+
+  describe('without a selected resource', () => {
+    beforeEach(() => {
+      document.body.innerHTML =
+        '<div id="tiles-view"><ul>' +
+        ['1', '2', '3'].map((id) => `<li><div data-item-id="${id}"></div></li>`).join('') +
+        '</ul></div>'
+    })
+
+    afterEach(() => {
+      document.body.innerHTML = ''
+    })
+
+    it.each(['ArrowUp', 'ArrowDown'])('does nothing on Shift+%s in tiles view', async (key) => {
+      const resources = [createResource('1'), createResource('2'), createResource('3')]
+      createMockStore({ stubActions: false, resourcesStore: { resources } })
+      const store = useResourcesStore()
+
+      const keyActions = createKeyActions()
+      useKeyboardFileNavigation(keyActions, ref(resources), ref(FolderViewModeConstants.name.tiles))
+      await nextTick()
+
+      expect(() => triggerAction(keyActions, key, 'Shift')).not.toThrow()
+      expect(store.selectedIds).toEqual([])
+    })
+
+    it('does not add an empty selection on Space', () => {
+      const resources = [createResource('1'), createResource('2')]
+      createMockStore({ stubActions: false, resourcesStore: { resources } })
+      const store = useResourcesStore()
+
+      const keyActions = createKeyActions()
+      useKeyboardFileNavigation(keyActions, ref(resources), ref(FolderViewModeConstants.name.table))
+
+      triggerAction(keyActions, ' ')
+
+      expect(store.selectedIds).toEqual([])
+    })
+  })
 })