a-select placeholder not displayed when v-model:value initialized with empty string
Closed this issue · 1 comments
parade0393 commented
Description
When a-select component's v-model:value is initialized with an empty string '',
the placeholder is not displayed. However, when initialized with undefined or null,
the placeholder displays correctly. This behavior is inconsistent with user expectations .
Expected Behavior
The placeholder should be displayed regardless of whether the initial value is an empty
string, undefined, or null, as they all represent an unselected state from a UX perspective.
Actual Behavior
- When
const value = ref('')- placeholder is not displayed, component width collapses - When
const value = ref()orref(undefined)- placeholder is displayed correctly
Reproduction
<template>
<a-form layout="inline">
<!-- Placeholder NOT displayed -->
<a-form-item label="Select 1">
<a-select v-model:value="value1" placeholder="Select an option">
<a-select-option value="option1">Option 1</a-select-option>
<a-select-option value="option2">Option 2</a-select-option>
</a-select>
</a-form-item>
<!-- Placeholder displayed correctly -->
<a-form-item label="Select 2">
<a-select v-model:value="value2" placeholder="Select an option">
<a-select-option value="option1">Option 1</a-select-option>
<a-select-option value="option2">Option 2</a-select-option>
</a-select>
</a-form-item>
</a-form>
</template>
<script setup>
import { ref } from 'vue'
const value1 = ref('') // ❌ Placeholder not shown
const value2 = ref() // ✅ Placeholder shown
</script>Environment
- ant-design-vue version:4.2.6
- Vue version: 3.5.22
- Browser:chrome
github-actions commented
Hello @parade0393, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue, thank you!
你好 @parade0393,为了能够进行高效沟通,我们对 issue 有一定的格式要求,你的 issue 因为不符合要求而被自动关闭。你可以通过 issue 助手 来创建 issue 以方便我们定位错误。谢谢配合!