SearchformVue e.selected bug fix (slim-select filters)

package-lock.json

@@ -62,7 +62,7 @@
         "mini-css-extract-plugin": "^1.3.1",
         "querystring-es3": "^0.2.1",
         "sass-loader": "^10.1.0",
-        "slim-select": "^2.10.0",
+        "slim-select": "^2.11.0",
         "style-loader": "^2.0.0",
         "uglify-es": "^3.3.9",
         "url-loader": "^4.1.1",
@@ -11560,9 +11560,9 @@
       }
     },
     "node_modules/slim-select": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/slim-select/-/slim-select-2.10.0.tgz",
-      "integrity": "sha512-sOKXH8YlgspTn+wy1jYbscVlFbBsAIOmtrmx1e16sV+NbYDTIyJCCdLH0EL9gDxDdHzBgE/s5XZ+VChaxz0JGg==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/slim-select/-/slim-select-2.11.0.tgz",
+      "integrity": "sha512-Y0FEJKIPBy8ax7jArUxICxtKAnhX8GH7ydaFhcrYH7OznfpvxCe8uU2etyuRPKhE23c2LhT2GROFvZzGVplA0g==",
       "dev": true,
       "license": "MIT"
     },

package.json

@@ -71,7 +71,7 @@
     "mini-css-extract-plugin": "^1.3.1",
     "querystring-es3": "^0.2.1",
     "sass-loader": "^10.1.0",
-    "slim-select": "^2.10.0",
+    "slim-select": "^2.11.0",
     "style-loader": "^2.0.0",
     "uglify-es": "^3.3.9",
     "url-loader": "^4.1.1",

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -31,14 +31,14 @@ export default {
   },
   methods: {
     submit() {
-      console.log("search submited", this.typed, this.autocomplete, this.filters, this.slimFilters)
+      console.log("slim search submited", this.typed, this.autocomplete, this.filters, this.slimFilters)
       // unfocus the text input to hide the keyboard on mobile device
       this.$input.blur()
       // New search is triggered by Base.vue with router (which will also fill the store)
       // cleaning slimfilters
       let filters = []
       this.slimFilters.forEach((filter, index) => {
-        console.log('onsubmit foreach filters', filter)
+        console.log('onsubmit foreach slimFilters', filter)
         if(filter){
           filters.push(filter)
         }
@@ -93,8 +93,10 @@ export default {
 
     },
     onSelectFiltersChange(index, info){
-      console.log('onSelectFiltersChange', index, info, this.slimFilters, this.filters)
+      console.log('slim onSelectFiltersChange', index, info, this.slimFilters, this.filters)
       this.slimFilters[index] = info.value
+      console.log(this.slimFilters);
+      
     },
     onClickFilters(e){
       console.log('onClickFilters legend', e)
@@ -175,8 +177,12 @@ export default {
     // customize the select filters
     // http://slimselectjs.com/options
     const selects = this.$el.querySelectorAll('select')
+    console.log('slim selects', selects);
+    
     let slim;
     selects.forEach((selectElement, index) => {
+      console.log('slim selects forEach', selectElement, index);
+      
       // get the first option to make the placeholder then empty it
       const placeholder_option = selectElement.querySelector('option:first-child')
       // console.log('placeholder_option', placeholder_option);
@@ -185,20 +191,24 @@ export default {
       placeholder_option.setAttribute("data-placeholder", true)
       placeholder_option.innerHTML = ''
       slim = new SlimSelect({
+        events:{
+          afterChange: (newval) => {
+            console.log('slim slimselect onchange', index, newval, this)  
+            this.onSelectFiltersChange(index, newval[0])
+          }
+        },
         select: selectElement,
         placeholder: placeholder,
-        // allowDeselect: true
-        allowDeselectOption: true,
+        allowDeselect: true,
         showSearch: false,
-        closeOnSelect: true,
-        onChange: (info) => {
-          this.onSelectFiltersChange(index, info)
-        }
+        closeOnSelect: true
       })
-      console.log('slimselect selected', slim.selected(), index)
-      this.slimFilters[index] = slim.selected()
+      console.log('slim', slim);
+      // console.log('slimselect selected', slim, slim.selected(), index)
+
+      this.slimFilters[index] = slim.getSelected()[0];
     })
-    console.log('slimSelect after init', this.slimFilters)
+    console.log('slimSelect slimFilters after init', this.slimFilters)
   },
   render(h) {
     // console.log('searchForm render')