[Component] [select-v2] Placeholder doesn't display with empty value since 2.2.18

[gwen1230]

Bug Type: Component

Environment

• Vue Version: 3.2.33
• Element Plus Version: 2.2.19
• Browser / OS: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
• Build Tool: Vite

Reproduction

Related Component

• el-select-v2

Reproduction Link

Element Plus Playground

Steps to reproduce

<script setup>
const value = ref('')
const options =  [
        { label: '1', value: '1' },
        { label: '2', value: '2' },
      ];
</script>

<template>
  <el-select-v2 v-model="value" :options="options" placeholder="placeholder" clearable>
  </el-select-v2>
</template>

What is Expected?

When the value is an empty string or when I clear the field, the placeholder is displayed.

What is actually happening?

The placeholder doesn't display

Additional comments

(empty)

[plainheart]

As per #9835, the placeholder shows only when the value is null/undefined/NaN. Maybe @holazz can provide you with more information about this change.

[holazz]

Because select-v2 supports an empty string as a value, you can use const value = ref() instead of const value = ref(''). Related to #9609

[gwen1230]

@holazz Yes I see that ! However the clearable doesn't work too even if my initial value is null...
On my application, my users need to have an option with empty value display, may I put an option with label '' and value null ?

[holazz]

@holazz Yes I see that ! However the clearable doesn't work too even if my initial value is null... On my application, my users need to have an option with empty value display, may I put an option with label '' and value null ?

Can this PR solve your problem? Demo

[gwen1230]

Yes ! And if I add en option like { label: '', value: null }, i can have an empty value in dropdown.

[holazz]

Yes ! And if I add en option like { label: '', value: null }, i can have an empty value in dropdown.

No, the value in options cannot be null.

[gwen1230]

For information, if I add an option with null value in latest element-plus version, this doesn't work (error in console). However on your PR, it works perfectly !

[gwen1230]

Yes ! And if I add en option like { label: '', value: null }, i can have an empty value in dropdown.

No, the value in options cannot be null.

Yet on your PR, it seems to works perfectly...

What is the solution to have a empty value that also display the placeholders when selected ?

Like this : Demo (select 2.2.17 version)

[holazz]

For information, if I add an option with null value in latest element-plus version, this doesn't work (error in console). However on your PR, it works perfectly !

This seems to work, but it should be noted that once you set the value to null, when you select this one, the placeholder will always be displayed no matter what the value of the label is set to. Demo

[gwen1230]

Yes ! It's exactly what I want... When i use null value in options it's for displaying the placeholder.
Do you have a better solution to have something like this
?

[holazz]

Yes ! It's exactly what I want... When i use null value in options it's for displaying the placeholder. Do you have a better solution to have something like this ?

If that's what you want, it's perfectly fine to use like this.

[gwen1230]

Okay ! Do you have any idea when your PR will be released ?

[holazz]

Okay ! Do you have any idea when your PR will be released ?

I'm not sure, maybe tomorrow.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

此 issue 已被自动锁定，因为关闭后没有任何近期活动。如果有相关 bug，请重新创建一个新 issue。