diff --git a/packages/components/select-v2/__tests__/select.test.ts b/packages/components/select-v2/__tests__/select.test.ts
index d747f65bbb..0e408fd1c4 100644
--- a/packages/components/select-v2/__tests__/select.test.ts
+++ b/packages/components/select-v2/__tests__/select.test.ts
@@ -2869,4 +2869,62 @@ describe('Select', () => {
await input.trigger('click')
expect((select.vm as any).expanded).toBe(true)
})
+
+ describe('input-wrapper in multiple mode', () => {
+ it('should hide input-wrapper when empty and not focused', async () => {
+ const wrapper = createSelect({
+ data: () => ({
+ multiple: true,
+ filterable: true,
+ }),
+ })
+ await nextTick()
+ const select = wrapper.findComponent(Select)
+ const inputWrapper = select.find('.el-select__input-wrapper')
+ const input = select.find('input')
+
+ // When input is empty and not focused, input-wrapper should have hidden class
+ expect(inputWrapper.classes()).toContain('is-hidden')
+
+ // Focus the input
+ await input.trigger('focus')
+
+ // When focused, input-wrapper should not have hidden class
+ expect(inputWrapper.classes()).not.toContain('is-hidden')
+
+ // Blur the input
+ await input.trigger('blur')
+
+ // When blurred and empty, input-wrapper should have hidden class again
+ expect(inputWrapper.classes()).toContain('is-hidden')
+ })
+
+ it('should show input-wrapper when input has value', async () => {
+ const wrapper = createSelect({
+ data: () => ({
+ multiple: true,
+ filterable: true,
+ }),
+ })
+ await nextTick()
+ const select = wrapper.findComponent(Select)
+ const inputWrapper = select.find('.el-select__input-wrapper')
+ const input = select.find('input')
+
+ // Initially empty, should be hidden
+ expect(inputWrapper.classes()).toContain('is-hidden')
+
+ // Set input value
+ await input.setValue('test')
+
+ // When input has value, input-wrapper should not have hidden class
+ expect(inputWrapper.classes()).not.toContain('is-hidden')
+
+ // Clear input
+ await input.setValue('')
+
+ // When empty again, should be hidden
+ expect(inputWrapper.classes()).toContain('is-hidden')
+ })
+ })
})
diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue
index 1b25080774..b616e9e3b1 100644
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@@ -173,7 +173,12 @@
:class="[
nsSelect.e('selected-item'),
nsSelect.e('input-wrapper'),
- nsSelect.is('hidden', !filterable || selectDisabled),
+ nsSelect.is(
+ 'hidden',
+ !filterable ||
+ selectDisabled ||
+ (!states.inputValue && !isFocused)
+ ),
]"
>
{
vi.useRealTimers()
})
+
+ describe('input-wrapper in multiple mode', () => {
+ test('should hide input-wrapper when empty and not focused', async () => {
+ wrapper = getSelectVm({
+ multiple: true,
+ filterable: true,
+ })
+ const inputWrapper = wrapper.find('.el-select__input-wrapper')
+ const input = wrapper.find('input')
+
+ // When input is empty and not focused, input-wrapper should have hidden class
+ expect(inputWrapper.classes()).toContain('is-hidden')
+
+ // Focus the input
+ await input.trigger('focus')
+
+ // When focused, input-wrapper should not have hidden class
+ expect(inputWrapper.classes()).not.toContain('is-hidden')
+
+ // Blur the input
+ await input.trigger('blur')
+
+ // When blurred and empty, input-wrapper should have hidden class again
+ expect(inputWrapper.classes()).toContain('is-hidden')
+ })
+
+ test('should show input-wrapper when input has value', async () => {
+ wrapper = getSelectVm({
+ multiple: true,
+ filterable: true,
+ })
+ const inputWrapper = wrapper.find('.el-select__input-wrapper')
+ const input = wrapper.find('input')
+
+ // Initially empty, should be hidden
+ expect(inputWrapper.classes()).toContain('is-hidden')
+
+ // Set input value
+ await input.setValue('test')
+
+ // When input has value, input-wrapper should not have hidden class
+ expect(inputWrapper.classes()).not.toContain('is-hidden')
+
+ // Clear input
+ await input.setValue('')
+
+ // When empty again, should be hidden
+ expect(inputWrapper.classes()).toContain('is-hidden')
+ })
+ })
})
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index 0838eb1d61..3922bf9c77 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -171,7 +171,12 @@
:class="[
nsSelect.e('selected-item'),
nsSelect.e('input-wrapper'),
- nsSelect.is('hidden', !filterable || selectDisabled),
+ nsSelect.is(
+ 'hidden',
+ !filterable ||
+ selectDisabled ||
+ (!states.inputValue && !isFocused)
+ ),
]"
>