Merge pull request #1861 from adevinta/fix-select-first-item

fix(select): placeholder item for select

packages/components/select/src/Select.stories.tsx

@@ -26,6 +26,7 @@ export const Default: StoryFn = _args => {
         </Select.Trigger>
 
         <Select.Items>
+          <Select.Placeholder>--Pick a book--</Select.Placeholder>
           <Select.Item value="book-1">To Kill a Mockingbird</Select.Item>
           <Select.Item value="book-2">War and Peace</Select.Item>
           <Select.Item value="book-3">The Idiot</Select.Item>
@@ -49,6 +50,7 @@ export const Controlled: StoryFn = () => {
         </Select.Trigger>
 
         <Select.Items>
+          <Select.Placeholder>--Pick a book--</Select.Placeholder>
           <Select.Item value="book-1">To Kill a Mockingbird</Select.Item>
           <Select.Item value="book-2">War and Peace</Select.Item>
           <Select.Item value="book-3">The Idiot</Select.Item>
@@ -70,6 +72,7 @@ export const Disabled: StoryFn = _args => {
         </Select.Trigger>
 
         <Select.Items>
+          <Select.Placeholder>--Pick a book--</Select.Placeholder>
           <Select.Item value="book-1">To Kill a Mockingbird</Select.Item>
           <Select.Item value="book-2">War and Peace</Select.Item>
           <Select.Item value="book-3">The Idiot</Select.Item>
@@ -91,6 +94,7 @@ export const ReadOnly: StoryFn = _args => {
         </Select.Trigger>
 
         <Select.Items>
+          <Select.Placeholder>--Pick a book--</Select.Placeholder>
           <Select.Item value="book-1">To Kill a Mockingbird</Select.Item>
           <Select.Item value="book-2">War and Peace</Select.Item>
           <Select.Item value="book-3">The Idiot</Select.Item>
@@ -112,6 +116,7 @@ export const DisabledItem: StoryFn = _args => {
         </Select.Trigger>
 
         <Select.Items>
+          <Select.Placeholder>--Pick a book--</Select.Placeholder>
           <Select.Item value="book-1">To Kill a Mockingbird</Select.Item>
           <Select.Item value="book-2">War and Peace</Select.Item>
           <Select.Item value="book-3" disabled>
@@ -135,6 +140,7 @@ export const Grouped: StoryFn = _args => {
         </Select.Trigger>
 
         <Select.Items>
+          <Select.Placeholder>--Pick a book--</Select.Placeholder>
           <Select.Group>
             <Select.Label>Best-sellers</Select.Label>
             <Select.Item value="book-1">To Kill a Mockingbird</Select.Item>
@@ -166,6 +172,7 @@ export const LeadingIcon: StoryFn = _args => {
         </Select.Trigger>
 
         <Select.Items>
+          <Select.Placeholder>--Pick a book--</Select.Placeholder>
           <Select.Item value="book-1">To Kill a Mockingbird</Select.Item>
           <Select.Item value="book-2">War and Peace</Select.Item>
           <Select.Item value="book-3">The Idiot</Select.Item>

packages/components/select/src/Select.test.tsx

@@ -93,6 +93,7 @@ describe('Select', () => {
           </Select.Trigger>
 
           <Select.Items>
+            <Select.Placeholder>--Pick a book--</Select.Placeholder>
             <Select.Item value="book-1">War and Peace</Select.Item>
             <Select.Item value="book-2">1984</Select.Item>
             <Select.Item value="book-3">Pride and Prejudice</Select.Item>
@@ -135,6 +136,7 @@ describe('Select', () => {
               </Select.Trigger>
 
               <Select.Items>
+                <Select.Placeholder>--Pick a book--</Select.Placeholder>
                 <Select.Item value="book-1">{bookText}</Select.Item>
                 <Select.Item value="book-2">War and Peace</Select.Item>
                 <Select.Item value="book-3">The Idiot</Select.Item>
@@ -167,6 +169,7 @@ describe('Select', () => {
             </Select.Trigger>
 
             <Select.Items>
+              <Select.Placeholder>--Pick a book--</Select.Placeholder>
               <Select.Item value="book-1">War and Peace</Select.Item>
               <Select.Item value="book-2">1984</Select.Item>
               <Select.Item value="book-3">Pride and Prejudice</Select.Item>
@@ -194,6 +197,7 @@ describe('Select', () => {
           </Select.Trigger>
 
           <Select.Items>
+            <Select.Placeholder>--Pick a book--</Select.Placeholder>
             <Select.Item value="book-1">War and Peace</Select.Item>
             <Select.Item value="book-2">1984</Select.Item>
             <Select.Item value="book-3">Pride and Prejudice</Select.Item>
@@ -225,6 +229,7 @@ describe('Select', () => {
           </Select.Trigger>
 
           <Select.Items>
+            <Select.Placeholder>--Pick a book--</Select.Placeholder>
             <Select.Item value="book-1">War and Peace</Select.Item>
             <Select.Item value="book-2">1984</Select.Item>
             <Select.Item value="book-3">Pride and Prejudice</Select.Item>
@@ -250,6 +255,7 @@ describe('Select', () => {
             </Select.Trigger>
 
             <Select.Items>
+              <Select.Placeholder>--Pick a book--</Select.Placeholder>
               <Select.Item value="book-1">War and Peace</Select.Item>
               <Select.Item value="book-2">1984</Select.Item>
               <Select.Item value="book-3">Pride and Prejudice</Select.Item>

packages/components/select/src/SelectContext.tsx

@@ -31,6 +31,8 @@ export interface SelectContextState {
   fieldLabelId: string | undefined
   name: string | undefined
   required: boolean
+  placeholder: string | undefined
+  setPlaceholder: Dispatch<SetStateAction<string | undefined>>
 }
 
 export type SelectContextProps = PropsWithChildren<{
@@ -86,11 +88,13 @@ export const SelectProvider = ({
   required: requiredProp,
 }: SelectContextProps) => {
   const [value, setValue] = useCombinedState(valueProp, defaultValue, onValueChange)
+  const [placeholder, setPlaceholder] = useState<string | undefined>(undefined)
   const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(itemsComponent))
   const [ariaLabel, setAriaLabel] = useState<string>()
 
   // Computed state
-  const selectedItem = typeof value === 'string' ? itemsMap.get(value) : undefined
+  const firstItem = itemsMap.entries().next().value[1]
+  const selectedItem = typeof value === 'string' ? itemsMap.get(value) : firstItem
   const isControlled = valueProp != null
 
   // Derivated from FormField context
@@ -155,6 +159,8 @@ export const SelectProvider = ({
         fieldLabelId,
         name,
         required,
+        placeholder,
+        setPlaceholder,
       }}
     >
       {children}

packages/components/select/src/SelectPlaceholder.tsx

@@ -0,0 +1,32 @@
+import { forwardRef, type Ref, useEffect } from 'react'
+
+import { useSelectContext } from './SelectContext'
+
+export interface PlaceholderProps {
+  disabled?: boolean
+  children: string
+}
+
+export const Placeholder = forwardRef(
+  ({ disabled = false, children }: PlaceholderProps, forwardedRef: Ref<HTMLOptionElement>) => {
+    const { setPlaceholder } = useSelectContext()
+
+    useEffect(() => {
+      setPlaceholder(children)
+    }, [children])
+
+    return (
+      <option
+        data-spark-component="select-placeholder"
+        ref={forwardedRef}
+        key="placeholder"
+        value=""
+        disabled={disabled}
+      >
+        {children}
+      </option>
+    )
+  }
+)
+
+Placeholder.displayName = 'Select.Placeholder'

packages/components/select/src/SelectValue.tsx

@@ -6,15 +6,22 @@ import { useSelectContext } from './SelectContext'
 export interface ValueProps {
   children?: ReactNode
   className?: string
-  placeholder: string
+  /**
+   * Optional placeholder value for the trigger.
+   * If not specified, the value inside `Select.Placeholder` item will be used.
+   */
+  placeholder?: string
 }
 
 export const Value = forwardRef(
-  ({ children, className, placeholder }: ValueProps, forwardedRef: Ref<HTMLSpanElement>) => {
-    const { selectedItem } = useSelectContext()
+  (
+    { children, className, placeholder: customPlaceholder }: ValueProps,
+    forwardedRef: Ref<HTMLSpanElement>
+  ) => {
+    const { selectedItem, placeholder } = useSelectContext()
 
-    const hasSelectedItem = !!selectedItem
-    const text = selectedItem?.text
+    const isPlaceholderSelected = selectedItem?.value == null
+    const valuePlaceholder = customPlaceholder || placeholder
 
     return (
       <span
@@ -26,10 +33,10 @@ export const Value = forwardRef(
         <span
           className={cx(
             'line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all',
-            !hasSelectedItem && 'text-on-surface/dim-1'
+            isPlaceholderSelected && 'text-on-surface/dim-1'
           )}
         >
-          {!hasSelectedItem ? placeholder : children || text}
+          {isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text}
         </span>
       </span>
     )

packages/components/select/src/index.ts

@@ -7,6 +7,7 @@ import { Item } from './SelectItem'
 import { Items } from './SelectItems'
 import { Label } from './SelectLabel'
 import { LeadingIcon } from './SelectLeadingIcon'
+import { Placeholder } from './SelectPlaceholder'
 import { Trigger } from './SelectTrigger'
 import { Value } from './SelectValue'
 
@@ -16,6 +17,7 @@ export const Select: FC<SelectProps> & {
   Group: typeof Group
   Item: typeof Item
   Items: typeof Items
+  Placeholder: typeof Placeholder
   Label: typeof Label
   Trigger: typeof Trigger
   Value: typeof Value
@@ -24,6 +26,7 @@ export const Select: FC<SelectProps> & {
   Group,
   Item,
   Items,
+  Placeholder,
   Label,
   Trigger,
   Value,
@@ -34,6 +37,7 @@ Select.displayName = 'Select'
 Group.displayName = 'Select.Group'
 Items.displayName = 'Select.Items'
 Item.displayName = 'Select.Item'
+Placeholder.displayName = 'Select.Placeholder'
 Label.displayName = 'Select.Label'
 Trigger.displayName = 'Select.Trigger'
 Value.displayName = 'Select.Value'

packages/components/select/src/utils.ts

@@ -19,7 +19,10 @@ const getOrderedItems = (children: ReactNode, result: SelectItem[] = []): Select
   React.Children.forEach(children, child => {
     if (!isValidElement(child)) return
 
-    if (getElementDisplayName(child) === 'Select.Item') {
+    if (
+      getElementDisplayName(child) === 'Select.Item' ||
+      getElementDisplayName(child) === 'Select.Placeholder'
+    ) {
       const childProps = child.props as ItemProps
       result.push({
         value: childProps.value,