From 3e4291ac94556603543a92bd17bec2f5b8cc60db Mon Sep 17 00:00:00 2001
From: mm <25961416+mlmoravek@users.noreply.github.com>
Date: Tue, 9 Jul 2024 17:04:59 +0200
Subject: [PATCH] fix(dropdown): fix multiple behavior (#1012)

---
 .../components/autocomplete/examples/infinite-scroll.vue   | 3 ++-
 packages/oruga/src/components/dropdown/Dropdown.vue        | 6 +++---
 packages/oruga/src/components/dropdown/DropdownItem.vue    | 7 +++++--
 .../oruga/src/components/dropdown/examples/multiple.vue    | 2 +-
 .../src/components/dropdown/examples/programmatically.vue  | 2 +-
 5 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/oruga/src/components/autocomplete/examples/infinite-scroll.vue b/packages/oruga/src/components/autocomplete/examples/infinite-scroll.vue
index 7a7fe2a6f..3bb1bd5f9 100644
--- 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
index 5cd283bc3..029e86737 100644
--- 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
index d3c19cb94..9469ce6a9 100644
--- 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
index c9d91218b..c8580eade 100644
--- 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
index 05cb59296..b5ffba2f6 100644
--- 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