fix: do not propagate click event on checkbox

changelog/unreleased/bugfix-do-not-propagate-click-event

@@ -0,0 +1,6 @@
+Bugfix: Do not propagate click event on checkbox
+
+When clicking on the checkbox to select a resource, it hasn't been selected because a click on the row would have been caught as well which would reset the selection again.
+We've fixed this issue by not propagating the click event on checkbox to the parent.
+
+https://github.com/owncloud/file-picker/pull/53

src/components/ListResources.vue

@@ -12,11 +12,12 @@
       <oc-td v-if="!isLocationPicker" class="oc-pm" width="shrink">
         <oc-checkbox
           class="file-picker-resource-checkbox uk-margin-small-left"
+          :data-testid="`list-resources-checkbox-${resource.id}`"
           :value="isResourceSelected(resource)"
           :label="selectLabel(resource.name)"
           :hide-label="true"
-          @click.stop
-          @change.native="toggleResourceSelection(resource)"
+          @click.native.stop
+          @input="toggleResourceSelection(resource)"
         />
       </oc-td>
       <oc-td class="oc-pm">

tests/integration/specs/filePicker.spec.js

@@ -7,8 +7,8 @@ describe('Users can select location from within the file picker', () => {
   test('User can select the current folder', async () => {
     const { getByTestId, emitted } = render(FilePicker, {
       props: {
-        variation: 'location'
-      }
+        variation: 'location',
+      },
     })
 
     await waitFor(() => expect(getByTestId('list-resources-table')).toBeVisible())
@@ -25,8 +25,8 @@ describe('Users can select location from within the file picker', () => {
   test('User can select a nested folder as a location', async () => {
     const { getByTestId, emitted, getByText } = render(FilePicker, {
       props: {
-        variation: 'location'
-      }
+        variation: 'location',
+      },
     })
 
     await waitFor(() => expect(getByTestId('list-resources-table')).toBeVisible())
@@ -47,7 +47,7 @@ describe('Users can select location from within the file picker', () => {
     await fireEvent.click(getByTestId('list-header-btn-select'))
 
     const expectedFolder = resources['/Photos'].find(
-      r => r.fileInfo['{http://owncloud.org/ns}fileid'] === '1'
+      (r) => r.fileInfo['{http://owncloud.org/ns}fileid'] === '1'
     )
 
     expect(emitted().selectResources[0][0][0].id).toMatch(
@@ -57,5 +57,45 @@ describe('Users can select location from within the file picker', () => {
 })
 
 describe('Users can select resources from within the file picker', () => {
-  test.todo('User can select resources from the current folder')
+  test('User can select resources from the current folder', async () => {
+    const { getByTestId, getByText, emitted } = render(FilePicker, {
+      props: {
+        variation: 'resource',
+      },
+    })
+
+    await waitFor(() => expect(getByTestId('list-resources-table')).toBeVisible())
+
+    expect(getByText('Photos')).toBeVisible()
+
+    await fireEvent.click(getByText('Photos'))
+
+    await waitFor(() => expect(getByText('Vacation')).toBeVisible())
+    expect(getByText('Teotihuacan')).toBeVisible()
+    expect(getByTestId('list-resources-row-9')).not.toHaveClass('files-list-row-disabled')
+
+    await fireEvent.click(getByTestId('list-resources-checkbox-1').querySelector('.oc-checkbox'))
+    await fireEvent.click(getByTestId('list-resources-checkbox-9').querySelector('.oc-checkbox'))
+
+    expect(getByTestId('list-resources-row-1')).toHaveClass('oc-background-selected')
+    expect(getByTestId('list-resources-row-9')).toHaveClass('oc-background-selected')
+    expect(getByTestId('list-header-btn-select')).toBeVisible()
+
+    await fireEvent.click(getByTestId('list-header-btn-select'))
+
+    const expectedResources = resources['/Photos']
+
+    expect(
+      expectedResources.find(
+        (r) =>
+          r.fileInfo['{http://owncloud.org/ns}fileid'] === emitted().selectResources[0][0][0].id
+      )
+    ).toBeTruthy()
+    expect(
+      expectedResources.find(
+        (r) =>
+          r.fileInfo['{http://owncloud.org/ns}fileid'] === emitted().selectResources[0][0][1].id
+      )
+    ).toBeTruthy()
+  })
 })