Display value not present in the DOM for E2E Testing

[ruffjaxson]

(using Headless 2.1)

I'm trying to switch all of the drop-downs in our app over to the Combobox.

We have extensive E2E tests using Cypress. These tests use the pickers, and then check the display values. From what I can tell, the combobox does not expose the selected item's display value in the DOM... yet it's somehow appearing inside the input element.

To be clear, even though there is a value selected, when I CMD+F in the dev console Elements tab for 'Hawaii', I only see the hidden input with the right value. I need to see the display value somewhere in the DOM for proper E2E testing.

The cypress code:

cy.get('#dropdown-account-status').should('contain', 'Free Trial');

Our combobox:

import React, { Dispatch, ReactElement, SetStateAction, useState, useEffect } from 'react';
import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Label } from '@headlessui/react'
import classNames from '../../../utils/class-names';
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/outline';
import { prepareStringForId, ripOutHtml } from '../../../utils/string-utility';

export interface HeadlessPickerItem {
  value: string;
  displayValue: string;
}

type HeadlessUiPickerProps = {
  formInputName: string;
  items: Array<HeadlessPickerItem>;
  selectedItem: HeadlessPickerItem;
  setSelectedItem: Dispatch<SetStateAction<HeadlessPickerItem>>;
  label?: string;
  emWidth?: number;
  disabled?: boolean;
};

const HeadlessUiPicker = <T extends string>(
  {
    formInputName,
    items,
    selectedItem,
    setSelectedItem,
    label,
    emWidth = 14,
    disabled = false,
  }: HeadlessUiPickerProps,
): ReactElement => {
  const [query, setQuery] = useState('')

  const filteredItems =
    query === ''
      ? items
      : items.filter((item) => {
        return item.displayValue.toLowerCase().includes(query.toLowerCase())
      });

  return (
    <div style={{ width: `${emWidth}em` }}>
      <Combobox
        disabled={disabled}
        immediate
        value={selectedItem}
        onChange={(item) => { setSelectedItem(item)}}
        onClose={() => setQuery('')}
        by="value"
      >
        {label && (<Label className="block text-sm font-medium text-gray-700 mb-1">{label}</Label>)}
        <div className="relative">
          <ComboboxInput
            id={`dropdown-${prepareStringForId(formInputName)}`}
            className={classNames(
              'w-full rounded-md bg-white py-1.5 pr-8 pl-3 text-sm text-black cursor-pointer',
              ' focus:ring-blue-600 focus:border-blue-600 border-gray-300 shadow-sm text-ellipsis',
            )}
            onChange={(event) => setQuery(event.target.value)}
            style={{ height: '38px' }}
            displayValue={(item?: HeadlessPickerItem) => item?.displayValue}
            placeholder="Select One:"
          />
          <ComboboxButton className="w-fit absolute inset-y-0 right-0 px-2">
            <ChevronUpDownIcon className="size-5 text-slate-400" />
          </ComboboxButton>
        </div>

        <ComboboxOptions
          anchor="bottom"
          transition
          className={classNames(
            'w-[var(--input-width)] rounded-lg border space-y-0.5 border-gray-300 bg-white p-1 [--anchor-gap:var(--spacing-1)] empty:invisible',
            'transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0'
          )}
        >
          {filteredItems.map((item) => (
            <ComboboxOption
              id={`dropdown-option-${prepareStringForId(item.displayValue)}`}
              key={item.value}
              value={item}
              className={classNames('group text-slate-600 text-sm flex justify-between cursor-pointer items-center rounded-lg py-1.5 px-3',
                'data-[selected]:bg-slate-200  data-[selected]:font-semibold  data-[selected]:text-slate-800',
                'data-[focus]:bg-slate-100',
              )}
            >
              {ripOutHtml(item.displayValue)}
              <CheckIcon className="invisible size-4 text-blue-500 group-data-[selected]:visible" />
            </ComboboxOption>
          ))}
        </ComboboxOptions>
      </Combobox>
      <input type="hidden" name={formInputName} value={selectedItem?.value} />
    </div>
  );
};

export default HeadlessUiPicker;

Any help greatly appreciated. Thank you 🙏🏼

[JoeBoulton]

Having the same issue.

Because the data is already client facing as a temporary workaround making a hidden div with the value selection from the combobox allowed the tests to pass.

<div className="hidden" data-testid={selectionBoxInputTestID}> {item?.displayValue} </div>