feat: combobox custom options issue#3201

src/components/forms/ComboBox/ComboBox.stories.tsx

@@ -46,6 +46,54 @@ export const DefaultComboBoxWithPropOptions = (): JSX.Element => {
   )
 }
 
+export const WithCustomOptions = (): JSX.Element => {
+  const veggieList = Object.entries(veggies).map(([key, value]) => ({
+    value: key,
+    label: value,
+    render: () => {
+      return (
+        <div className="padding-2 border border-base-lighter radius-md bg-white">
+          <div className="font-sans-md text-bold">
+            {value}
+          </div>
+          <div className="font-sans-sm text-base">
+            Category: Veggies 
+          </div>
+        </div>
+      )
+    }
+  }))
+
+  const fruitList = Object.entries(fruits).map(([key, value]) => ({
+    value: key,
+    label: value,
+    render: () => {
+      return (
+        <div className="padding-2 border border-base-lighter radius-md bg-white">
+          <div className="font-sans-md text-bold">
+            {value}
+          </div>
+          <div className="font-sans-sm text-base">
+            Category: Fruit
+          </div>
+        </div>
+      )
+    }
+  }))
+
+  return (
+    <Form onSubmit={noop}>
+      <Label htmlFor="input-ComboBox">Select a fruit or veggie</Label>
+      <ComboBox
+        id="input-ComboBox"
+        name="input-ComboBox"
+        options={veggieList.concat(fruitList)}
+        onChange={noop}
+      />
+    </Form>
+  )
+}
+
 export const WithDefaultValue = (): JSX.Element => {
   const fruitList = Object.entries(fruits).map(([value, key]) => ({
     value: value,

src/components/forms/ComboBox/ComboBox.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { screen, render, waitFor } from '@testing-library/react'
+import { screen, render, waitFor, within } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 
 import { ComboBox, ComboBoxOption, ComboBoxRef } from './ComboBox'
@@ -26,6 +26,25 @@ const veggieOptions: ComboBoxOption[] = Object.entries(veggies).map(
   })
 )
 
+const veggieCustomOptions: ComboBoxOption[] = Object.entries(veggies).map(
+  ([value, key]) => ({
+    value: value,
+    label: key,
+    render: () => {
+      return (
+        <div className="padding-2 border border-base-lighter radius-md bg-white">
+          <div className="font-sans-md text-bold">
+            {value}
+          </div>
+          <div className="font-sans-sm text-base">
+            Category: Veggies
+          </div>
+        </div>
+      )
+    }
+  })
+)
+
 describe('ComboBox component', () => {
   it('renders the expected markup without errors', () => {
     render(
@@ -282,6 +301,28 @@ describe('ComboBox component', () => {
     expect(getByTestId('combo-box-option-list')).not.toBeVisible()
   })
 
+  it('renders custom JSX options', async () => {
+      const { getByTestId } = render(
+        <ComboBox
+          id="favorite-veggie"
+          name="favorite-veggie"
+          options={veggieCustomOptions}
+          onChange={vi.fn()}
+        />
+      )
+
+      await userEvent.click(getByTestId('combo-box-toggle'))
+      expect(screen.getAllByRole('option')).toHaveLength(veggieCustomOptions.length)
+
+      veggieCustomOptions.forEach(item => {
+        const listEl = screen.getByTestId('combo-box-option-' + item.value)
+        expect(listEl).toBeInTheDocument()
+        expect(listEl).toHaveAttribute('value', item.value)
+        const categoryEl = within(listEl).getByText('Category: Veggies')
+        expect(categoryEl).toBeInTheDocument()
+      }) 
+  })
+
   describe('with custom props', () => {
     it('renders select with custom props if passed in', () => {
       const { getByTestId } = render(

src/components/forms/ComboBox/ComboBox.tsx

@@ -23,6 +23,7 @@ const DEFAULT_FILTER = '.*{{query}}.*'
 export interface ComboBoxOption {
   value: string
   label: string
+  render?: () => JSX.Element
 }
 
 enum Direction {
@@ -485,7 +486,7 @@ const ComboBoxForwardRef: React.ForwardRefRenderFunction<
               onClick={(): void => {
                 dispatch({ type: ActionTypes.SELECT_OPTION, option: option })
               }}>
-              {option.label}
+              {option.render ? option.render(): option.label}
             </li>
           )
         })}