fix(dropdown): fix multiple behavior (#1012)

oruga-ui · Jul 9, 2024 · 3e4291a · 3e4291a
1 parent 1024fe3
commit 3e4291a
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 8 deletions.
diff --git a/packages/oruga/src/components/autocomplete/examples/infinite-scroll.vue b/packages/oruga/src/components/autocomplete/examples/infinite-scroll.vue
@@ -82,7 +82,8 @@ function getMoreAsyncData(): void {
                         </div>
                     </div>
                 </template>
-                <template v-if="page > totalPages" #footer>
+
+                <template v-if="page > totalPages || !options.length" #footer>
                     <span class="ex-text-grey">
                         Thats it! No more movies found.
                     </span>

diff --git a/packages/oruga/src/components/dropdown/Dropdown.vue b/packages/oruga/src/components/dropdown/Dropdown.vue
@@ -18,7 +18,7 @@ import PositionWrapper from "../utils/PositionWrapper.vue";
 
 import { getOption } from "@/utils/config";
 import { vTrapFocus } from "@/directives/trapFocus";
-import { toCssDimension, isMobileAgent } from "@/utils/helpers";
+import { toCssDimension, isMobileAgent, isTrueish } from "@/utils/helpers";
 import { isClient } from "@/utils/ssr";
 import {
     unrefElement,
@@ -296,9 +296,9 @@ function checkDropdownScroll(): void {
  *   3. Close the dropdown.
  */
 function selectItem(value: T): void {
-    if (props.multiple) {
+    if (isTrueish(props.multiple)) {
         if (vmodel.value && Array.isArray(vmodel.value)) {
-            if (vmodel.value.indexOf(value) === -1) {
+            if (!vmodel.value.includes(value)) {
                 // add a value
                 vmodel.value = [...vmodel.value, value] as ModelValue;
             } else {

diff --git a/packages/oruga/src/components/dropdown/DropdownItem.vue b/packages/oruga/src/components/dropdown/DropdownItem.vue
@@ -2,7 +2,7 @@
 import { computed, type PropType } from "vue";
 
 import { getOption } from "@/utils/config";
-import { uuid, isEqual } from "@/utils/helpers";
+import { uuid, isEqual, isTrueish } from "@/utils/helpers";
 import { defineClasses, useProviderChild } from "@/composables";
 
 import type { DropdownComponent } from "./types";
@@ -89,7 +89,10 @@ const isClickable = computed(
 
 const isActive = computed(() => {
     if (parent.value.selected === null) return false;
-    if (parent.value.props.multiple && Array.isArray(parent.value.selected))
+    if (
+        isTrueish(parent.value.props.multiple) &&
+        Array.isArray(parent.value.selected)
+    )
         return parent.value.selected.some((selected: T) =>
             isEqual(props.value, selected),
         );

diff --git a/packages/oruga/src/components/dropdown/examples/multiple.vue b/packages/oruga/src/components/dropdown/examples/multiple.vue
@@ -8,7 +8,7 @@ const selectedOptions = ref([]);
     <section>
         <p><b>selected</b>: {{ selectedOptions }}</p>
 
-        <o-dropdown v-model:model-value="selectedOptions">
+        <o-dropdown v-model:model-value="selectedOptions" multiple>
             <template #trigger>
                 <o-button
                     variant="primary"

diff --git a/packages/oruga/src/components/dropdown/examples/programmatically.vue b/packages/oruga/src/components/dropdown/examples/programmatically.vue
@@ -5,7 +5,7 @@ const active = ref(false);
 </script>
 
 <template>
-    <o-field expanded>
+    <o-field grouped>
         <o-dropdown v-model:active="active">
             <template #trigger="{ active }">
                 <o-button