fix(select): adjust multiple prop behavior (#1014)

oruga-ui · Jul 10, 2024 · 6e25bee · 6e25bee
1 parent 46d4fd5
commit 6e25bee
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 18 deletions.
diff --git a/packages/oruga/src/components/select/Select.vue b/packages/oruga/src/components/select/Select.vue
@@ -10,7 +10,7 @@ import { computed, watch, onMounted, ref, nextTick } from "vue";
 import OIcon from "../icon/Icon.vue";
 
 import { getOption } from "@/utils/config";
-import { isDefined, uuid } from "@/utils/helpers";
+import { isDefined, isTrueish, uuid } from "@/utils/helpers";
 import { defineClasses, useInputHandler } from "@/composables";
 
 import { injectField } from "../field/fieldInjection";
@@ -110,7 +110,9 @@ const vmodel = defineModel<ModelValue>({
 });
 
 const placeholderVisible = computed(
-    () => !props.multiple && (!isDefined(vmodel.value) || vmodel.value === ""),
+    () =>
+        !isTrueish(props.multiple) &&
+        (!isDefined(vmodel.value) || vmodel.value === ""),
 );
 
 onMounted(() => {
@@ -143,8 +145,8 @@ const selectOptions = computed<OptionsItem<T>[]>(() => {
 
 const hasIconRight = computed(
     () =>
-        (props.iconRight && !props.multiple) ||
-        (props.statusIcon && statusVariantIcon.value),
+        (!!props.iconRight && !isTrueish(props.multiple)) ||
+        (props.statusIcon && !!statusVariantIcon.value),
 );
 
 const rightIcon = computed(() =>
@@ -190,8 +192,18 @@ const rootClasses = defineClasses(
 
 const selectClasses = defineClasses(
     ["selectClass", "o-sel"],
-    ["roundedClass", "o-sel--rounded", null, computed(() => props.rounded)],
-    ["multipleClass", "o-sel--multiple", null, computed(() => props.multiple)],
+    [
+        "roundedClass",
+        "o-sel--rounded",
+        null,
+        computed(() => isTrueish(props.rounded)),
+    ],
+    [
+        "multipleClass",
+        "o-sel--multiple",
+        null,
+        computed(() => isTrueish(props.multiple)),
+    ],
     [
         "sizeClass",
         "o-sel--",
@@ -204,25 +216,25 @@ const selectClasses = defineClasses(
         computed(() => statusVariant.value || props.variant),
         computed(() => !!statusVariant.value || !!props.variant),
     ],
-    ["disabledClass", "o-sel--disabled", null, computed(() => props.disabled)],
     [
-        "iconLeftSpaceClass",
-        "o-sel-iconspace-left",
+        "disabledClass",
+        "o-sel--disabled",
         null,
-        computed(() => !!props.icon),
+        computed(() => isTrueish(props.disabled)),
     ],
     [
-        "iconRightSpaceClass",
-        "o-sel-iconspace-right",
+        "iconLeftSpaceClass",
+        "o-sel-iconspace-left",
         null,
-        computed(() => !!props.iconRight),
+        computed(() => !!props.icon),
     ],
+    ["iconRightSpaceClass", "o-sel-iconspace-right", null, hasIconRight],
     ["placeholderClass", "o-sel--placeholder", null, placeholderVisible],
     [
         "arrowClass",
         "o-sel-arrow",
         null,
-        computed(() => !hasIconRight.value && !props.multiple),
+        computed(() => !hasIconRight.value && !isTrueish(props.multiple)),
     ],
 );
 

diff --git a/packages/oruga/src/components/select/examples/grouped.vue b/packages/oruga/src/components/select/examples/grouped.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-const selected = ref<string[]>([]);
+const selected = ref<string>("");
 </script>
 
 <template>

diff --git a/packages/oruga/src/components/select/tests/select.test.ts b/packages/oruga/src/components/select/tests/select.test.ts
@@ -112,17 +112,14 @@ describe("OSelect tests", () => {
     test("render accordingly when has native attributes", () => {
         const wrapper = mount(OSelect, {
             props: {
-                multiple: true,
                 autocomplete: "on",
                 nativeSize: 3,
                 required: true,
-                modelValue: [],
             },
         });
 
         const select = wrapper.find("select");
         expect(select.exists()).toBeTruthy();
-        expect(select.attributes("multiple")).not.toBeUndefined();
         expect(select.attributes("autocomplete")).toBe("on");
         expect(select.attributes("size")).toBe("3");
         expect(select.attributes("required")).not.toBeUndefined();
@@ -209,4 +206,47 @@ describe("OSelect tests", () => {
             expect(select.element.focus).toHaveBeenCalled();
         });
     });
+
+    test("render accordingly when with multiple prop", async () => {
+        const wrapper = mount(OSelect, {
+            props: {
+                options: options,
+                multiple: true,
+                modelValue: [],
+            },
+        });
+
+        const select = wrapper.find("select");
+        expect(select.exists()).toBeTruthy();
+        expect(select.classes("o-sel--multiple")).toBeTruthy();
+
+        // check all options are there
+        const optionValues = wrapper.findAll("option");
+        expect(optionValues.length).toBe(options.length);
+
+        // check nochting got emmited yet
+        let emit = wrapper.emitted("update:modelValue");
+        expect(emit).toBeUndefined();
+
+        // click one option
+        await wrapper.setValue([options[1].value]);
+
+        emit = wrapper.emitted("update:modelValue");
+        expect(emit).toHaveLength(1);
+        expect(emit[0][0]).toHaveLength(1);
+
+        // click second option
+        await wrapper.setValue([options[1].value, options[3].value]);
+
+        emit = wrapper.emitted("update:modelValue");
+        expect(emit).toHaveLength(2);
+        expect(emit[1][0]).toHaveLength(2);
+
+        // click first option again
+        await wrapper.setValue([options[1].value]);
+
+        emit = wrapper.emitted("update:modelValue");
+        expect(emit).toHaveLength(3);
+        expect(emit[2][0]).toHaveLength(1);
+    });
 });