@arbor-education/design-system.components 0.8.1 → 0.10.0

package/src/components/combobox/Combobox.test.tsx

@@ -147,6 +147,30 @@ describe('Combobox', () => {
     expect(search).toHaveFocus();
   });
 
+  test('button trigger keeps popover with search input when filter matches nothing', async () => {
+    const user = userEvent.setup();
+    render(<Combobox options={people} triggerVariant="button" placeholder="Students" />);
+    await user.click(screen.getByRole('button', { name: 'Open suggestions' }));
+
+    const search = screen.getByRole('combobox');
+    await user.type(search, 'zzz');
+
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    expect(screen.queryAllByRole('option')).toHaveLength(0);
+
+    await user.clear(search);
+    expect(within(screen.getByRole('listbox')).getAllByRole('option')).toHaveLength(people.length);
+  });
+
+  test('button trigger closes popover after single-select option click', async () => {
+    const user = userEvent.setup();
+    render(<Combobox options={people} triggerVariant="button" placeholder="Students" />);
+    await user.click(screen.getByRole('button', { name: 'Open suggestions' }));
+    await user.click(screen.getByText('Alice Johnson'));
+
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
   test('button trigger single-select does not show selection count badge', () => {
     render(
       <Combobox
@@ -158,6 +182,33 @@ describe('Combobox', () => {
     expect(screen.queryByLabelText(/selected item/i)).not.toBeInTheDocument();
   });
 
+  test('button trigger can render plain text instead of tags for a selected value', () => {
+    render(
+      <Combobox
+        options={people}
+        triggerVariant="button"
+        selectedValueDisplay="text"
+        defaultValue={['alice']}
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: /alice johnson/i })).toHaveTextContent('Alice Johnson');
+    expect(document.querySelector('.ds-tag')).not.toBeInTheDocument();
+  });
+
+  test('renders custom trigger end content alongside the trigger', () => {
+    render(
+      <Combobox
+        options={people}
+        triggerVariant="button"
+        showDropdownTrigger={false}
+        triggerEndContent={<span>clock</span>}
+      />,
+    );
+
+    expect(screen.getByText('clock')).toBeInTheDocument();
+  });
+
   test('button trigger multi-select shows salmon count badge when multiple chips', () => {
     render(
       <Combobox
@@ -326,20 +377,22 @@ describe('Combobox', () => {
   });
 
   test('Ctrl+A selects all chips when input is focused', async () => {
+    const user = userEvent.setup();
     render(<Combobox options={people} multiple defaultValue={['alice', 'bob']} />);
     const input = screen.getByRole('combobox');
-    input.focus();
+    await user.click(input);
 
-    await userEvent.keyboard('{Control>}a{/Control}');
+    await user.keyboard('{Control>}a{/Control}');
 
     const selectedTags = document.querySelectorAll('.ds-tag--selected');
     expect(selectedTags).toHaveLength(2);
   });
 
   test('Cmd+A selects all chips in single-select mode', async () => {
+    const user = userEvent.setup();
     render(<Combobox options={people} defaultValue={['alice']} />);
     const input = screen.getByRole('combobox');
-    input.focus();
+    await user.click(input);
 
     fireEvent.keyDown(input, { key: 'a', metaKey: true });
 
@@ -348,54 +401,58 @@ describe('Combobox', () => {
   });
 
   test('Backspace clears all selected chips after select-all', async () => {
+    const user = userEvent.setup();
     const onValueChange = vi.fn();
     render(
       <Combobox options={people} multiple defaultValue={['alice', 'bob']} onValueChange={onValueChange} />,
     );
     const input = screen.getByRole('combobox');
-    input.focus();
+    await user.click(input);
 
-    await userEvent.keyboard('{Control>}a{/Control}');
-    await userEvent.keyboard('{Backspace}');
+    await user.keyboard('{Control>}a{/Control}');
+    await user.keyboard('{Backspace}');
 
     expect(onValueChange).toHaveBeenLastCalledWith([]);
     expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(0);
   });
 
   test('Delete clears all selected chips after select-all', async () => {
+    const user = userEvent.setup();
     const onValueChange = vi.fn();
     render(
       <Combobox options={people} multiple defaultValue={['alice', 'bob']} onValueChange={onValueChange} />,
     );
     const input = screen.getByRole('combobox');
-    input.focus();
+    await user.click(input);
 
-    await userEvent.keyboard('{Control>}a{/Control}');
-    await userEvent.keyboard('{Delete}');
+    await user.keyboard('{Control>}a{/Control}');
+    await user.keyboard('{Delete}');
 
     expect(onValueChange).toHaveBeenLastCalledWith([]);
     expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(0);
   });
 
   test('typing after chip select-all clears selected chip styling', async () => {
+    const user = userEvent.setup();
     render(<Combobox options={people} multiple defaultValue={['alice', 'bob']} />);
     const input = screen.getByRole('combobox');
-    input.focus();
+    await user.click(input);
 
-    await userEvent.keyboard('{Control>}a{/Control}');
+    await user.keyboard('{Control>}a{/Control}');
     expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(2);
 
-    await userEvent.type(input, 'c');
+    await user.type(input, 'c');
 
     expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(0);
   });
 
   test('Ctrl+A with no chips keeps native input behavior and does not crash', async () => {
+    const user = userEvent.setup();
     render(<Combobox options={people} />);
     const input = screen.getByRole('combobox');
-    input.focus();
+    await user.click(input);
 
-    await userEvent.keyboard('{Control>}a{/Control}');
+    await user.keyboard('{Control>}a{/Control}');
 
     expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(0);
   });
@@ -555,21 +612,23 @@ describe('Combobox', () => {
   });
 
   test('keyboard: ArrowDown opens the listbox', async () => {
+    const user = userEvent.setup();
     render(<Combobox options={people} />);
     const input = screen.getByRole('combobox');
-    input.focus();
+    await user.click(input);
 
-    await userEvent.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
 
     expect(screen.getByRole('listbox')).toBeInTheDocument();
   });
 
   test('keyboard: Alt+ArrowDown opens the listbox', async () => {
+    const user = userEvent.setup();
     render(<Combobox options={people} />);
     const input = screen.getByRole('combobox');
-    input.focus();
+    await user.click(input);
 
-    await userEvent.keyboard('{Alt>}{ArrowDown}{/Alt}');
+    await user.keyboard('{Alt>}{ArrowDown}{/Alt}');
 
     expect(screen.getByRole('listbox')).toBeInTheDocument();
   });
@@ -612,14 +671,15 @@ describe('Combobox', () => {
   });
 
   test('keyboard: Backspace on empty input removes last chip', async () => {
+    const user = userEvent.setup();
     const onValueChange = vi.fn();
     render(
       <Combobox options={people} multiple defaultValue={['alice', 'bob']} onValueChange={onValueChange} />,
     );
     const input = screen.getByRole('combobox');
-    input.focus();
+    await user.click(input);
 
-    await userEvent.keyboard('{Backspace}');
+    await user.keyboard('{Backspace}');
 
     expect(onValueChange).toHaveBeenCalledWith(['alice']);
   });
@@ -695,7 +755,7 @@ describe('Combobox', () => {
 
     expect(onCreateNew).toHaveBeenCalledWith('Taylor');
     expect(onValueChange).toHaveBeenCalledWith(['new-taylor']);
-    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   });
 
   test('allowCreate duplicate prevention selects existing option', async () => {
@@ -1017,131 +1077,141 @@ describe('Combobox', () => {
   });
 
   describe('chip keyboard navigation', () => {
-    test('ArrowLeft at caret 0 focuses the last chip', () => {
+    test('ArrowLeft at caret 0 focuses the last chip', async () => {
+      const user = userEvent.setup();
       render(<Combobox options={people} multiple defaultValue={['alice', 'bob']} />);
       const input = screen.getByRole('combobox');
-      input.focus();
+      await user.click(input);
 
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
+      await user.keyboard('{ArrowLeft}');
 
       const tags = document.querySelectorAll('.ds-tag');
       expect(tags[1]).toHaveClass('ds-tag--selected');
       expect(tags[0]).not.toHaveClass('ds-tag--selected');
     });
 
-    test('ArrowLeft navigates through chips from right to left', () => {
+    test('ArrowLeft navigates through chips from right to left', async () => {
+      const user = userEvent.setup();
       render(<Combobox options={people} multiple defaultValue={['alice', 'bob', 'charlie']} />);
       const input = screen.getByRole('combobox');
-      input.focus();
+      await user.click(input);
 
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
+      await user.keyboard('{ArrowLeft}');
+      await user.keyboard('{ArrowLeft}');
 
       const tags = document.querySelectorAll('.ds-tag');
       expect(tags[1]).toHaveClass('ds-tag--selected');
       expect(tags[2]).not.toHaveClass('ds-tag--selected');
     });
 
-    test('ArrowLeft does not go past the first chip', () => {
+    test('ArrowLeft does not go past the first chip', async () => {
+      const user = userEvent.setup();
       render(<Combobox options={people} multiple defaultValue={['alice', 'bob']} />);
       const input = screen.getByRole('combobox');
-      input.focus();
+      await user.click(input);
 
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
+      await user.keyboard('{ArrowLeft}');
+      await user.keyboard('{ArrowLeft}');
+      await user.keyboard('{ArrowLeft}');
 
       const tags = document.querySelectorAll('.ds-tag');
       expect(tags[0]).toHaveClass('ds-tag--selected');
     });
 
-    test('ArrowRight past the last chip returns focus to input (exits chip nav)', () => {
+    test('ArrowRight past the last chip returns focus to input (exits chip nav)', async () => {
+      const user = userEvent.setup();
       render(<Combobox options={people} multiple defaultValue={['alice', 'bob']} />);
       const input = screen.getByRole('combobox');
-      input.focus();
+      await user.click(input);
 
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
+      await user.keyboard('{ArrowLeft}');
       expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(1);
 
-      fireEvent.keyDown(input, { key: 'ArrowRight' });
+      await user.keyboard('{ArrowRight}');
       expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(0);
     });
 
-    test('Backspace on focused chip removes it', () => {
+    test('Backspace on focused chip removes it', async () => {
+      const user = userEvent.setup();
       const onValueChange = vi.fn();
       render(
         <Combobox options={people} multiple defaultValue={['alice', 'bob', 'charlie']} onValueChange={onValueChange} />,
       );
       const input = screen.getByRole('combobox');
-      input.focus();
+      await user.click(input);
 
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
-      fireEvent.keyDown(input, { key: 'Backspace' });
+      await user.keyboard('{ArrowLeft}');
+      await user.keyboard('{ArrowLeft}');
+      await user.keyboard('{Backspace}');
 
       expect(onValueChange).toHaveBeenCalledWith(['alice', 'charlie']);
     });
 
-    test('Delete on focused chip removes it', () => {
+    test('Delete on focused chip removes it', async () => {
+      const user = userEvent.setup();
       const onValueChange = vi.fn();
       render(
         <Combobox options={people} multiple defaultValue={['alice', 'bob']} onValueChange={onValueChange} />,
       );
       const input = screen.getByRole('combobox');
-      input.focus();
+      await user.click(input);
 
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
-      fireEvent.keyDown(input, { key: 'Delete' });
+      await user.keyboard('{ArrowLeft}');
+      await user.keyboard('{ArrowLeft}');
+      await user.keyboard('{Delete}');
 
       expect(onValueChange).toHaveBeenCalledWith(['bob']);
     });
 
-    test('Backspace on first chip focuses next or exits', () => {
+    test('Backspace on first chip focuses next or exits', async () => {
+      const user = userEvent.setup();
       const onValueChange = vi.fn();
       render(
         <Combobox options={people} multiple defaultValue={['alice']} onValueChange={onValueChange} />,
       );
       const input = screen.getByRole('combobox');
-      input.focus();
+      await user.click(input);
 
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
-      fireEvent.keyDown(input, { key: 'Backspace' });
+      await user.keyboard('{ArrowLeft}');
+      await user.keyboard('{Backspace}');
 
       expect(onValueChange).toHaveBeenCalledWith([]);
       expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(0);
     });
 
     test('typing exits chip nav mode', async () => {
+      const user = userEvent.setup();
       render(<Combobox options={people} multiple defaultValue={['alice', 'bob']} />);
       const input = screen.getByRole('combobox');
-      input.focus();
+      await user.click(input);
 
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
+      await user.keyboard('{ArrowLeft}');
       expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(1);
 
-      await userEvent.type(input, 'c');
+      await user.type(input, 'c');
       expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(0);
     });
 
-    test('Escape exits chip nav mode', () => {
+    test('Escape exits chip nav mode', async () => {
+      const user = userEvent.setup();
       render(<Combobox options={people} multiple defaultValue={['alice', 'bob']} />);
       const input = screen.getByRole('combobox');
-      input.focus();
+      await user.click(input);
 
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
+      await user.keyboard('{ArrowLeft}');
       expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(1);
 
-      fireEvent.keyDown(input, { key: 'Escape' });
+      await user.keyboard('{Escape}');
       expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(0);
     });
 
-    test('Cmd+A during chip nav enters bulk-select-all mode', () => {
+    test('Cmd+A during chip nav enters bulk-select-all mode', async () => {
+      const user = userEvent.setup();
       render(<Combobox options={people} multiple defaultValue={['alice', 'bob']} />);
       const input = screen.getByRole('combobox');
-      input.focus();
+      await user.click(input);
 
-      fireEvent.keyDown(input, { key: 'ArrowLeft' });
+      await user.keyboard('{ArrowLeft}');
       expect(document.querySelectorAll('.ds-tag--selected')).toHaveLength(1);
 
       fireEvent.keyDown(input, { key: 'a', metaKey: true });

package/src/components/combobox/Combobox.tsx

@@ -30,7 +30,9 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
     disabled = false,
     dropdownOnFocus = true,
     triggerVariant = 'input',
+    selectedValueDisplay = 'tags',
     showDropdownTrigger = true,
+    triggerEndContent,
     showSelectionCountBadge = triggerVariant === 'button' && multiple,
     selectionCountA11yLabel,
     loading = false,
@@ -94,6 +96,7 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
   const { listboxRef, getOptionId, scrollHighlightedIntoView } = useComboboxListboxDom({
     comboboxId,
   });
+  const chipKeyboardEnabled = selectedValueDisplay === 'tags';
 
   const {
     selectedChipValues,
@@ -103,7 +106,9 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
     focusedChipIndex,
     setFocusedChipIndex,
     exitChipNav,
-  } = useChipSelection(selectedValues);
+  } = useChipSelection(chipKeyboardEnabled ? selectedValues : []);
+
+  const renderSearchInputInListbox = triggerVariant === 'button';
 
   const {
     shouldRenderPopoverContent,
@@ -136,6 +141,7 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
     clearChipSelection,
     exitChipNav,
     triggerContainsInput: triggerVariant === 'input',
+    renderSearchInputInListbox,
   });
 
   const optionGroups = useMemo(() => buildOptionGroups(filteredOptions), [filteredOptions]);
@@ -220,7 +226,7 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
     scrollHighlightedIntoView,
     selectOption,
     selectedChipValues,
-    selectedValues,
+    selectedValues: chipKeyboardEnabled ? selectedValues : [],
     setFocusedChipIndex,
     setHighlightIndex,
     setIsOpen,
@@ -247,7 +253,6 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
   const preventMouseDefault = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
   }, []);
-  const renderSearchInputInListbox = triggerVariant === 'button';
 
   const handlePopoverOpenAutoFocus = useCallback(
     (e: Event) => {
@@ -262,7 +267,7 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
   );
 
   const resolvedSelectionCountA11yLabel = useMemo(() => {
-    if (!showSelectionCountBadge || selectedValues.length === 0) {
+    if (!showSelectionCountBadge || !chipKeyboardEnabled || selectedValues.length === 0) {
       return undefined;
     }
     if (typeof selectionCountA11yLabel === 'function') {
@@ -272,7 +277,7 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
       return selectionCountA11yLabel;
     }
     return `${selectedValues.length} selected item${selectedValues.length === 1 ? '' : 's'}`;
-  }, [selectedValues.length, selectionCountA11yLabel, showSelectionCountBadge]);
+  }, [chipKeyboardEnabled, selectedValues.length, selectionCountA11yLabel, showSelectionCountBadge]);
 
   const handleButtonTriggerKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
@@ -312,6 +317,8 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
                 aria-invalid={ariaInvalid}
                 aria-label={ariaLabel}
                 showDropdownTrigger={showDropdownTrigger}
+                selectedValueDisplay={selectedValueDisplay}
+                triggerEndContent={triggerEndContent}
                 selectedChips={selectedChips}
                 selectedChipValuesSet={selectedChipValuesSet}
                 focusedChipIndex={focusedChipIndex}
@@ -337,6 +344,8 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
                 ariaDescribedBy={ariaDescribedBy}
                 ariaInvalid={ariaInvalid}
                 showDropdownTrigger={showDropdownTrigger}
+                selectedValueDisplay={selectedValueDisplay}
+                triggerEndContent={triggerEndContent}
                 selectedChips={selectedChips}
                 selectedChipValuesSet={selectedChipValuesSet}
                 focusedChipIndex={focusedChipIndex}
@@ -345,7 +354,7 @@ const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
                 handleTriggerClick={handleTriggerClick}
                 handleTriggerKeyDown={handleButtonTriggerKeyDown}
                 handleChevronClick={handleChevronClick}
-                showSelectionCountBadge={showSelectionCountBadge}
+                showSelectionCountBadge={showSelectionCountBadge && chipKeyboardEnabled}
                 selectionCountA11yLabel={resolvedSelectionCountA11yLabel}
               />
             )}

package/src/components/combobox/ComboboxButtonTrigger.tsx

@@ -4,7 +4,7 @@ import { Icon } from 'Components/icon/Icon';
 import { Tag } from 'Components/tag/Tag';
 import { Popover } from 'radix-ui';
 import { useMemo, useRef } from 'react';
-import type { ComboboxAriaInvalid, ComboboxOption } from './types';
+import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSelectedValueDisplay } from './types';
 import { useElementWidth } from './useElementWidth';
 import { useVisibleChips } from './useVisibleChips';
 
@@ -19,6 +19,8 @@ export type ComboboxButtonTriggerProps = {
   ariaDescribedBy?: string;
   ariaInvalid?: ComboboxAriaInvalid;
   showDropdownTrigger: boolean;
+  selectedValueDisplay: ComboboxSelectedValueDisplay;
+  triggerEndContent?: React.ReactNode;
   selectedChips: ComboboxOption[];
   selectedChipValuesSet: Set<string>;
   focusedChipIndex: number | null;
@@ -42,6 +44,8 @@ export const ComboboxButtonTrigger = ({
   ariaDescribedBy,
   ariaInvalid,
   showDropdownTrigger,
+  selectedValueDisplay,
+  triggerEndContent,
   selectedChips,
   selectedChipValuesSet,
   focusedChipIndex,
@@ -66,6 +70,11 @@ export const ComboboxButtonTrigger = ({
     [resolveTagLabel, selectedChips],
   );
 
+  const selectedValueText = useMemo(
+    () => selectedChips.map(resolveTagLabel).join(', '),
+    [resolveTagLabel, selectedChips],
+  );
+  const usesTagDisplay = selectedValueDisplay === 'tags';
   const shouldShowBadge = showSelectionCountBadge && selectedChips.length > 0;
 
   const contentWidth = useElementWidth(contentRef, `${chipWatchKey}-${isOpen}-${shouldShowBadge}`);
@@ -104,8 +113,8 @@ export const ComboboxButtonTrigger = ({
   const visibleChips = canMeasure
     ? layout.visibleChipIndices.map(index => selectedChips[index]!).filter(Boolean)
     : selectedChips;
-  const showEllipsis = canMeasure ? layout.showEllipsis : false;
-  const showBadge = canMeasure ? layout.showBadge : shouldShowBadge;
+  const showEllipsis = usesTagDisplay && (canMeasure ? layout.showEllipsis : false);
+  const showBadge = usesTagDisplay && (canMeasure ? layout.showBadge : shouldShowBadge);
 
   const renderSelectionTag = (opt: ComboboxOption, chipIdx: number, onRemove?: () => void) => (
     <Tag
@@ -148,18 +157,36 @@ export const ComboboxButtonTrigger = ({
         onKeyDown={handleTriggerKeyDown}
       >
         <div className="ds-combobox__button-content" ref={contentRef}>
-          <div className="ds-combobox__button-tags-viewport">
-            <div className="ds-combobox__button-tags-track">
-              {selectedChips.length === 0 && (
-                <span className="ds-combobox__button-placeholder">{placeholder}</span>
+          {usesTagDisplay
+            ? (
+                <div className="ds-combobox__button-tags-viewport">
+                  <div className="ds-combobox__button-tags-track">
+                    {selectedChips.length === 0 && (
+                      <span className="ds-combobox__button-placeholder">{placeholder}</span>
+                    )}
+                    {visibleChips.map((opt, chipIdx) =>
+                      renderSelectionTag(opt, chipIdx, disabled ? undefined : () => removeValue(opt.value)))}
+                  </div>
+                  {showEllipsis && <span className="ds-combobox__button-ellipsis" aria-hidden="true">…</span>}
+                </div>
+              )
+            : (
+                <span
+                  className={classNames({
+                    'ds-combobox__button-placeholder': selectedValueText.length === 0,
+                    'ds-combobox__selected-value': selectedValueText.length > 0,
+                  })}
+                >
+                  {selectedValueText || placeholder}
+                </span>
               )}
-              {visibleChips.map((opt, chipIdx) =>
-                renderSelectionTag(opt, chipIdx, disabled ? undefined : () => removeValue(opt.value)))}
-            </div>
-            {showEllipsis && <span className="ds-combobox__button-ellipsis" aria-hidden="true">…</span>}
-          </div>
           {showBadge && renderSelectionCountBadge(true)}
         </div>
+        {triggerEndContent && (
+          <span className="ds-combobox__end-content" aria-hidden="true">
+            {triggerEndContent}
+          </span>
+        )}
         {showDropdownTrigger && (
           <button
             type="button"
@@ -173,20 +200,22 @@ export const ComboboxButtonTrigger = ({
           </button>
         )}
 
-        <div className="ds-combobox__measure" aria-hidden="true">
-          {/* Mirror the rendered chips off-screen so width calculations use the real Tag layout. */}
-          <div className="ds-combobox__button-tags-track" ref={measureTrackRef}>
-            {selectedChips.map((opt, chipIdx) => (
-              <span key={`measure-${opt.value}`} className="ds-combobox__measure-chip">
-                {renderSelectionTag(opt, chipIdx, disabled ? undefined : () => {})}
-              </span>
-            ))}
+        {usesTagDisplay && (
+          <div className="ds-combobox__measure" aria-hidden="true">
+            {/* Mirror the rendered chips off-screen so width calculations use the real Tag layout. */}
+            <div className="ds-combobox__button-tags-track" ref={measureTrackRef}>
+              {selectedChips.map((opt, chipIdx) => (
+                <span key={`measure-${opt.value}`} className="ds-combobox__measure-chip">
+                  {renderSelectionTag(opt, chipIdx, disabled ? undefined : () => {})}
+                </span>
+              ))}
+            </div>
+            <span ref={ellipsisProbeRef} className="ds-combobox__button-ellipsis">…</span>
+            <span ref={badgeProbeRef}>
+              {shouldShowBadge ? renderSelectionCountBadge(false) : null}
+            </span>
           </div>
-          <span ref={ellipsisProbeRef} className="ds-combobox__button-ellipsis">…</span>
-          <span ref={badgeProbeRef}>
-            {shouldShowBadge ? renderSelectionCountBadge(false) : null}
-          </span>
-        </div>
+        )}
       </div>
     </Popover.Anchor>
   );