From e95e211f3150df1fa3cc19a923751d9de7317b69 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 21 Aug 2021 14:04:32 +0200
Subject: [PATCH 1/2] [OcSelect] Fix search for options provided as objects

---
 .../fix-search-for-options-provided-as-objects           | 9 +++++++++
 src/components/OcSelect.vue                              | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 changelog/unreleased/fix-search-for-options-provided-as-objects

diff --git a/changelog/unreleased/fix-search-for-options-provided-as-objects b/changelog/unreleased/fix-search-for-options-provided-as-objects
new file mode 100644
index 000000000..a7d18125c
--- /dev/null
+++ b/changelog/unreleased/fix-search-for-options-provided-as-objects
@@ -0,0 +1,9 @@
+Bugfix: Fix search for options provided as objects
+
+We fixed a regression that was introduced in https://github.com/owncloud/owncloud-design-system/pull/1521.
+`vue-select` automatically uses the property specified in `label` for filtering.
+When custom filtering based on Fuse.js was introduced that functionality got lost.
+Hence it was not possible to filter objects at all.
+
+
+https://github.com/owncloud/owncloud-design-system/pull/1602
\ No newline at end of file
diff --git a/src/components/OcSelect.vue b/src/components/OcSelect.vue
index 86570daca..b21e40cc4 100644
--- a/src/components/OcSelect.vue
+++ b/src/components/OcSelect.vue
@@ -41,12 +41,13 @@ export default {
     filter: {
       type: Function,
       required: false,
-      default: (items, search) => {
+      default: (items, search, props) => {
         if (items.length < 1) {
           return []
         }
 
         const fuse = new Fuse(items, {
+          keys: props.label ? [props.label] : [],
           shouldSort: true,
           threshold: 0.2,
           location: 0,

From e30830f3d427efa181a38f54ce880fc8f3324e81 Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Mon, 23 Aug 2021 15:58:10 +0200
Subject: [PATCH 2/2] fix(oc-select): add fuse keys only if label is given

only add fuse keys property if label ist set
---
 src/components/OcSelect.vue               | 112 +++++++++++-----------
 src/components/table/OcTableFiles.spec.js |   8 +-
 2 files changed, 62 insertions(+), 58 deletions(-)

diff --git a/src/components/OcSelect.vue b/src/components/OcSelect.vue
index b21e40cc4..f2c02690c 100644
--- a/src/components/OcSelect.vue
+++ b/src/components/OcSelect.vue
@@ -47,7 +47,7 @@ export default {
         }
 
         const fuse = new Fuse(items, {
-          keys: props.label ? [props.label] : [],
+          ...(props.label && { keys: [props.label] }),
           shouldSort: true,
           threshold: 0.2,
           location: 0,
@@ -166,16 +166,17 @@ For detailed documentation (props, slots, events, etc.), please visit https://vu
   </div>
 </template>
 <script>
-export default {
-  data: () => ({
-    selected: 'Apple'
-  })
-}
+  export default {
+    data: () => ({
+      selected: "Apple"
+    })
+  };
 </script>
 ```
 
 ### Prevent user from clearing the selection
-If we want to disable the clear button from the `oc-select`, we can set prop `clearable` to false. This will also prevent clearing the selected value by hitting `delete`.
+If we want to disable the clear button from the `oc-select`, we can set prop `clearable` to false. This will also
+prevent clearing the selected value by hitting `delete`.
 
 ```js
 <template>
@@ -184,11 +185,11 @@ If we want to disable the clear button from the `oc-select`, we can set prop `cl
   </div>
 </template>
 <script>
-export default {
-  data: () => ({
-    selected: 'Apple'
-  })
-}
+  export default {
+    data: () => ({
+      selected: "Apple"
+    })
+  };
 </script>
 ```
 
@@ -200,22 +201,23 @@ export default {
   </div>
 </template>
 <script>
-export default {
-  data: () => ({
-    selected: ['Apple']
-  }),
-
-  computed: {
-    options() {
-      return ['Apple', 'Bannana', 'Orange', 'Pear'].filter(option => this.selected.indexOf(option) < 0)
+  export default {
+    data: () => ({
+      selected: ["Apple"]
+    }),
+
+    computed: {
+      options() {
+        return ["Apple", "Bannana", "Orange", "Pear"].filter(option => this.selected.indexOf(option) < 0);
+      }
     }
-  }
-}
+  };
 </script>
 ```
 
 ### Disable search
-To prevent user from filtering options by typing a serach query into the `oc-select` component, set prop called `searchable` to false.
+To prevent user from filtering options by typing a serach query into the `oc-select` component, set prop called
+`searchable` to false.
 
 ```js
 <template>
@@ -224,17 +226,19 @@ To prevent user from filtering options by typing a serach query into the `oc-sel
   </div>
 </template>
 <script>
-export default {
-  data: () => ({
-    selected: 'Apple'
-  })
-}
+  export default {
+    data: () => ({
+      selected: "Apple"
+    })
+  };
 </script>
 ```
 
 ### Using slots to display complex options
-Sometimes we need to display more complex options. This can include e.g. an option with a title and a description. To still display all those values exactly as we want to, we need to use scoped slot called `option`.
-We can then retrieve all the values that we want to display from the slots parametres. It is important to specify the `label` prop on the `oc-select` component which will specify which key should be used as the option label.
+Sometimes we need to display more complex options. This can include e.g. an option with a title and a description. To
+still display all those values exactly as we want to, we need to use scoped slot called `option`.
+We can then retrieve all the values that we want to display from the slots parametres. It is important to specify the
+`label` prop on the `oc-select` component which will specify which key should be used as the option label.
 
 ```js
 <template>
@@ -259,32 +263,32 @@ We can then retrieve all the values that we want to display from the slots param
   </div>
 </template>
 <script>
-const options = [
-  {
-    title: 'Apple',
-    desc: 'An apple is an edible fruit produced by an apple tree (Malus domestica)'
-  },
-  {
-    title: 'Bannana',
-    desc: 'Bannana is a genus of goblin spiders (family Oonopidae) native to Xishuangbanna prefecture, Yunnan Province, China, where it lives in the leaf-litter of tropical rainforest'
-  },
-  {
-    title: 'Orange',
-    desc: 'The orange is the fruit of various citrus species in the family Rutaceae'
-  },
-]
-
-export default {
-  data: () => ({
-    selected: options[0],
-    options
-  })
-}
+  const options = [
+    {
+      title: "Apple",
+      desc: "An apple is an edible fruit produced by an apple tree (Malus domestica)"
+    },
+    {
+      title: "Bannana",
+      desc: "Bannana is a genus of goblin spiders (family Oonopidae) native to Xishuangbanna prefecture, Yunnan Province, China, where it lives in the leaf-litter of tropical rainforest"
+    },
+    {
+      title: "Orange",
+      desc: "The orange is the fruit of various citrus species in the family Rutaceae"
+    }
+  ];
+
+  export default {
+    data: () => ({
+      selected: options[0],
+      options
+    })
+  };
 </script>
 <style scoped>
-.option {
-  display: block;
-}
+  .option {
+    display: block;
+  }
 </style>
 ```
 
diff --git a/src/components/table/OcTableFiles.spec.js b/src/components/table/OcTableFiles.spec.js
index cf0aaf65b..edfef28c8 100644
--- a/src/components/table/OcTableFiles.spec.js
+++ b/src/components/table/OcTableFiles.spec.js
@@ -179,19 +179,19 @@ describe("OcTableFiles", () => {
     })
   })
 
-  describe("resource details", () => {
+  test.skip("resource details", () => {
     // TODO: rewrite tests for hightlighting
-    /*it("emits showDetails event when clicking on the button in actions column", () => {
+    test("emits showDetails event when clicking on the button in actions column", () => {
       wrapper.find(".oc-table-data-cell-actions .oc-table-files-btn-show-details").vm.$emit("click")
 
       expect(wrapper.emitted().showDetails).toBeTruthy()
     })
 
-    it("emits showDetails event when clicking on the row", async () => {
+    test("emits showDetails event when clicking on the row", async () => {
       await wrapper.find(".oc-tbody-tr").trigger("click")
 
       expect(wrapper.emitted().showDetails.length).toEqual(2)
-    })*/
+    })
   })
 
   describe("context menu", () => {