Merge pull request #1192 from nextcloud-libraries/fix/stop-click-event

lib/components/FilePicker/FileListRow.spec.ts

@@ -21,8 +21,8 @@
  */
 
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
 import { File } from '@nextcloud/files'
+import { shallowMount } from '@vue/test-utils'
 
 import FileListRow from './FileListRow.vue'
 
@@ -33,6 +33,7 @@ describe('FilePicker: FileListRow', () => {
 		mime: 'text/plain',
 		source: 'https://example.com/dav/a.txt',
 		root: '/',
+		attributes: { displayName: 'test' },
 	})
 
 	afterEach(() => {
@@ -90,9 +91,14 @@ describe('FilePicker: FileListRow', () => {
 				node,
 				cropImagePreviews: true,
 			},
+			stubs: {
+				NcCheckboxRadioSwitch: {
+					template: '<label><input type="checkbox" @click="$emit(\'update:checked\', true)" ></label>',
+				},
+			},
 		})
 
-		await wrapper.find('[data-testid="row-checkbox"]').trigger('click')
+		await wrapper.find('input[type="checkbox"]').trigger('click')
 
 		// one event with payload `true` is expected
 		expect(wrapper.emitted('update:selected')).toEqual([[true]])

lib/components/FilePicker/FileListRow.vue

@@ -6,17 +6,16 @@
 		}]"
 		:data-filename="node.basename"
 		data-testid="file-list-row"
-		@click="handleClick"
-		v-on="
+		v-on="{
+			click: handleClick,
 			/* same as tabindex -> if we hide the checkbox or this is a directory we need keyboard access to enter the directory or select the node */
-			(!showCheckbox || isDirectory) ? { keydown: handleKeyDown } : {}
-		">
-		<td v-if="showCheckbox" class="row-checkbox">
-			<NcCheckboxRadioSwitch :disabled="!isPickable"
+			...(!showCheckbox || isDirectory ? { keydown: handleKeyDown } : {}),
+		}">
+		<td v-if="showCheckbox" class="row-checkbox" @click.stop="() => {/* Stop the click event */}">
+			<NcCheckboxRadioSwitch :aria-label="t('Select the row for {nodename}', { nodename: displayName })"
 				:checked="selected"
-				:aria-label="t('Select the row for {nodename}', { nodename: displayName })"
+				:disabled="!isPickable"
 				data-testid="row-checkbox"
-				@click.stop="/* just stop the click event */"
 				@update:checked="toggleSelected" />
 		</td>
 		<td class="row-name">