fix(Select): add data-placeholder for empty array (#1796)

xerox0213 · web-flow · commit 5ee8b214484b · 2025-04-16T14:02:18.000+08:00
diff --git a/packages/core/src/Select/Select.test.ts b/packages/core/src/Select/Select.test.ts
@@ -33,6 +33,8 @@ describe('given default Select', () => {
 
   it('should show placeholder', () => {
     expect(valueBox.html()).toContain('Please select a fruit')
+    const selectTrigger = wrapper.find('[role="combobox"]')
+    expect(selectTrigger.attributes('data-placeholder')).toBe('')
   })
 
   describe('opening the modal', () => {
@@ -190,6 +192,19 @@ describe('given Select with multiple props', async () => {
             expect(group.exists()).toBeTruthy()
           })
         })
+
+        describe('after unselecting the value', () => {
+          it('should have data placeholder attribute', async () => {
+            const selection = wrapper.findAll('[role=option]')[1];
+            (selection.element as HTMLElement).focus()
+            await selection.trigger('pointerup')
+            // Needs 2 pointerup because SelectContentImpl prevents accidental pointerup's
+            await fireEvent.pointerUp(selection.element)
+
+            const trigger = wrapper.find('[role="combobox"]')
+            expect(trigger.attributes('data-placeholder')).toBe('')
+          })
+        })
       })
     })
   })
diff --git a/packages/core/src/Select/SelectTrigger.vue b/packages/core/src/Select/SelectTrigger.vue
@@ -11,7 +11,7 @@ import { computed, onMounted } from 'vue'
 import {
   injectSelectRootContext,
 } from './SelectRoot.vue'
-import { OPEN_KEYS } from './utils'
+import { OPEN_KEYS, shouldShowPlaceholder } from './utils'
 import { Primitive } from '@/Primitive'
 import { PopperAnchor, type PopperAnchorProps } from '@/Popper'
 import { useForwardExpose, useId, useTypeahead } from '@/shared'
@@ -65,9 +65,7 @@ function handlePointerOpen(event: PointerEvent) {
       :dir="rootContext?.dir.value"
       :data-state="rootContext?.open.value ? 'open' : 'closed'"
       :data-disabled="isDisabled ? '' : undefined"
-      :data-placeholder="
-        rootContext.modelValue?.value ? undefined : ''
-      "
+      :data-placeholder="shouldShowPlaceholder(rootContext.modelValue?.value) ? '' : undefined"
       :as-child="asChild"
       :as="as"
       @click="
diff --git a/packages/core/src/Select/utils.ts b/packages/core/src/Select/utils.ts
@@ -1,3 +1,4 @@
+import type { AcceptableValue } from '@/shared/types'
 import { isEqual } from 'ohash'
 
 export const OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown']
@@ -28,3 +29,7 @@ export function compare<T>(value?: T, currentValue?: T, comparator?: string | ((
 
   return isEqual(value, currentValue)
 }
+
+export function shouldShowPlaceholder(value?: AcceptableValue | AcceptableValue[]): boolean {
+  return value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0)
+}
