-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Closed as not planned
Closed as not planned
Copy link
Labels
Description
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