Disable dragging when filtering in CItemPicker

lib/vue/src/components/itemPicker/CItemPicker.vue

@@ -57,6 +57,7 @@
                 v-model="filteredAvailable"
                 :sort="!_disabledSorting"
                 :move="_disableDragging"
+                :disabled="query"
                 draggable=".item"
                 group="items"
                 class="overflow-auto h-100"
@@ -65,12 +66,15 @@
                   v-for="item in filteredAvailable"
                   :key="item.value"
                   class="item mb-3 border rounded"
+                  :class="{
+                    'handle': !isDraggable
+                  }"
                   @dblclick="select(item)"
                 >
                   <c-item-picker-item
                     :item="item"
                     :disabled="disabled"
-                    :disabled-dragging="disabledDragging"
+                    :disabled-dragging="isDraggable"
                     :disabled-sorting="disabledSorting"
                     :hide-icons="hideIcons"
                     @select="select(item)"
@@ -83,7 +87,7 @@
                         :name="slot"
                         :textField="textField"
                         :disabled="disabled"
-                        :disabled-dragging="disabledDragging"
+                        :disabled-dragging="isDraggable"
                         :disabled-sorting="disabledSorting"
                         :hide-icons="hideIcons"
                         v-bind="scope"
@@ -140,6 +144,7 @@
                 v-model="filteredSelected"
                 :sort="!_disabledSorting"
                 :move="_disableDragging"
+                :disabled="query"
                 draggable=".item"
                 group="items"
                 class="overflow-auto h-100"
@@ -148,12 +153,15 @@
                   v-for="item in filteredSelected"
                   :key="item.value"
                   class="item mb-3 border rounded"
+                  :class="{
+                    'handle': !isDraggable
+                  }"
                   @dblclick="unselect(item)"
                 >
                   <c-item-picker-item
                     :item="item"
                     :disabled="disabled"
-                    :disabled-dragging="disabledDragging"
+                    :disabled-dragging="isDraggable"
                     :disabled-sorting="disabledSorting"
                     :hide-icons="hideIcons"
                     selected
@@ -167,7 +175,7 @@
                         :name="slot"
                         :textField="textField"
                         :disabled="disabled"
-                        :disabled-dragging="disabledDragging"
+                        :disabled-dragging="isDraggable"
                         :disabled-sorting="disabledSorting"
                         :hide-icons="hideIcons"
                         v-bind="scope"
@@ -325,6 +333,10 @@ export default {
         this.selected = items
       },
     },
+
+    isDraggable () {
+      return this.disabledDragging || this.query.length > 0
+    },
   },
 
   watch: {
@@ -359,7 +371,7 @@ export default {
         /**
         * Make sure we do not fall into an infinite loop
         * 
-        * If we update the value thenn sync will trigger recomputation of selected
+        * If we update the value then sync will trigger recomputation of selected
         * Which then emits the update event and the loop will begin
         */
         if (value.length === oldValue.length) {
@@ -463,3 +475,12 @@ export default {
   },
 }
 </script>
+<style lang="scss" scoped>
+.handle {
+  cursor: grab;
+}
+
+.handle:active {
+  cursor: grabbing;
+}
+</style>

lib/vue/src/components/itemPicker/CItemPickerItem.vue

@@ -3,12 +3,15 @@
     class="d-flex align-items-center"
   >
     <font-awesome-icon
-      v-if="!disabled && !disabledDragging && !disabledSorting && !hideIcons"
+      v-if="!disabled && !disabledSorting && !hideIcons"
       :icon="['fas', 'grip-vertical']"
-      class="handle align-baseline mr-3 text-primary"
+      :class="{
+        'text-muted': disabledDragging,
+      }"
+      class="align-baseline mr-3 text-primary"
     />
     <b
-      class="cursor-default text-truncate"
+      class="text-truncate"
     >
       <slot
         v-bind="item"
@@ -16,22 +19,17 @@
         {{ item[textField] }}
       </slot>
     </b>
-    <template
+    <b-button
       v-if="_hideIcons"
+      variant="link"
+      class="text-decoration-none d-flex align-items-center align-baseline ml-auto px-2"
     >
       <font-awesome-icon
-        v-if="selected"
-        :icon="['far', 'eye']"
-        class="align-baseline ml-auto text-muted pointer"
-        @click="$emit('unselect')"
+        :icon="[selected ? 'far' : 'fas', selected ? 'eye' : 'eye-slash']"
+        class="text-muted"
+        @click="$emit(selected ? 'unselect' : 'select')"
       />
-      <font-awesome-icon
-        v-else
-        :icon="['fas', 'eye-slash']"
-        class="align-baseline ml-auto text-muted pointer"
-        @click="$emit('select')"
-      />
-    </template>
+    </b-button>
   </div>
 </template>
 
@@ -78,16 +76,3 @@ export default {
   },
 }
 </script>
-<style scoped>
-.handle {
-  cursor: grab;
-}
-
-.handle:active {
-  cursor: grabbing;
-}
-
-.cursor-default {
-  cursor: default;
-}
-</style>