fix(select): adjust placeholder behavior (#964)

* feat(select): add type generics | update examples * test(select): add select tests * fix(select): adjust placeholder behavior
oruga-ui · Jun 26, 2024 · 1c8b580 · 1c8b580
1 parent 058e734
commit 1c8b580
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/packages/docs/components/Select.md b/packages/docs/components/Select.md
@@ -49,7 +49,7 @@ title: Select
 | iconRightClickable | Make the icon right clickable                                  | boolean                                  | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                           |
 | iconRightVariant   | Variant of right icon                                          | string                                   | -                                                                               |                                                                                                                                                       |
 | id                 | Same as native id. Also set the for label for o-field wrapper. | string                                   | -                                                                               | Default function (see source code)                                                                                                                    |
-| v-model            | The input value state                                          | any                                      | -                                                                               |                                                                                                                                                       |
+| v-model            | The input value state                                          | any                                      | -                                                                               | <code style='white-space: nowrap; padding: 0;'>null</code>                                                                                            |
 | multiple           | Allow multiple selection - same as native multiple             | boolean                                  | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                           |
 | nativeSize         | Same as native size                                            | string \| number                         | -                                                                               |                                                                                                                                                       |
 | options            | Select options, unnecessary when default slot is used          | string[] \| OptionsItem&lt;unknown&gt;[] | -                                                                               |                                                                                                                                                       |

diff --git a/packages/oruga/src/components/datetimepicker/tests/__snapshots__/datetimepicker.test.ts.snap b/packages/oruga/src/components/datetimepicker/tests/__snapshots__/datetimepicker.test.ts.snap
@@ -345,7 +345,7 @@ exports[`ODatetimepicker tests > render correctly 1`] = `
         -->
                         <div class="" data-oruga="select">
                           <!--v-if--><select id="mocked" data-oruga-input="select" class="o-tpck__select o-tpck__select-placeholder" autocomplete="off">
-                            <option disabled="" hidden="">
+                            <option disabled="" hidden="" value="">
                               <!--
                         @slot Override the placeholder
                     -->00
@@ -382,7 +382,7 @@ exports[`ODatetimepicker tests > render correctly 1`] = `
                         </div><span class="o-tpck__separtor">:</span>
                         <div class="" data-oruga="select">
                           <!--v-if--><select id="mocked" data-oruga-input="select" class="o-tpck__select o-tpck__select-placeholder" autocomplete="off">
-                            <option disabled="" hidden="">
+                            <option disabled="" hidden="" value="">
                               <!--
                         @slot Override the placeholder
                     -->00

diff --git a/packages/oruga/src/components/select/Select.vue b/packages/oruga/src/components/select/Select.vue
@@ -4,7 +4,7 @@ import { computed, watch, onMounted, ref, nextTick, type PropType } from "vue";
 import OIcon from "../icon/Icon.vue";
 
 import { getOption } from "@/utils/config";
-import { uuid } from "@/utils/helpers";
+import { isDefined, uuid } from "@/utils/helpers";
 import { defineClasses, useInputHandler } from "@/composables";
 
 import { injectField } from "../field/fieldInjection";
@@ -30,7 +30,7 @@ const props = defineProps({
     /** The input value state */
     modelValue: {
         type: [String, Number, Boolean, Object, Array] as PropType<T | T[]>,
-        default: undefined,
+        default: null,
     },
     /** Select options, unnecessary when default slot is used */
     options: {
@@ -233,9 +233,15 @@ const { parentField, statusVariant, statusVariantIcon } = injectField();
 // if id is given set as `for` property on o-field wrapper
 if (props.id) parentField?.value?.setInputId(props.id);
 
-const vmodel = defineModel<T | T[]>({ default: undefined });
+const vmodel = defineModel<T | T[]>({
+    get: (v) => (isDefined(v) ? v : props.multiple ? [] : ""),
+    set: (v) => (isDefined(v) ? v : props.multiple ? [] : null),
+    default: null,
+});
 
-const placeholderVisible = computed(() => !props.multiple && !vmodel.value);
+const placeholderVisible = computed(
+    () => !props.multiple && (!isDefined(vmodel.value) || vmodel.value === ""),
+);
 
 onMounted(() => {
     /**
@@ -387,7 +393,7 @@ defineExpose({ focus: setFocus, value: vmodel });
             @focus="onFocus"
             @invalid="onInvalid">
             <template v-if="placeholder || $slots.placeholder">
-                <option v-if="placeholderVisible" :value="null" disabled hidden>
+                <option v-if="placeholderVisible" value="" disabled hidden>
                     <!--
                         @slot Override the placeholder
                     -->

diff --git a/packages/oruga/src/components/timepicker/tests/__snapshots__/timepicker.test.ts.snap b/packages/oruga/src/components/timepicker/tests/__snapshots__/timepicker.test.ts.snap
@@ -31,7 +31,7 @@ exports[`OTimepicker tests > render correctly 1`] = `
         -->
           <div class="" data-oruga="select">
             <!--v-if--><select id="mocked" data-oruga-input="select" class="o-tpck__select o-tpck__select-placeholder" autocomplete="off">
-              <option disabled="" hidden="">
+              <option disabled="" hidden="" value="">
                 <!--
                         @slot Override the placeholder
                     -->00
@@ -68,7 +68,7 @@ exports[`OTimepicker tests > render correctly 1`] = `
           </div><span class="o-tpck__separtor">:</span>
           <div class="" data-oruga="select">
             <!--v-if--><select id="mocked" data-oruga-input="select" class="o-tpck__select o-tpck__select-placeholder" autocomplete="off">
-              <option disabled="" hidden="">
+              <option disabled="" hidden="" value="">
                 <!--
                         @slot Override the placeholder
                     -->00