Issues with Keyboard Nav for React ComboBox

[wherewego-nina]

I have NextJS application that utilizes some of the headlessui react components. I am implementing a ComboBox and a List box and the keyboard navigation and interaction as specified in the documentation is not working. Is there anything else I need to set up for this to work?

I'm using v. 1.6.0.

here is my code for the combobox:

import { Combobox } from '@headlessui/react';
import { ChangeEvent, useState } from 'react';
import { useQuery } from 'react-query';
import { getSearchDropdownData } from '../../../logic/apiAccess';

interface SearchBoxProps {
  defaultSelection?: any;
  defaultQuery?: string;
}

type SearchData = {
  label: string;
  type: 'institution' | 'program' | 'careerName' | 'search';
};

const SearchBox: React.FC<SearchBoxProps> = ({
  defaultSelection,
  defaultQuery,
}) => {
  const [selectedData, setSelectedData] = useState(defaultSelection || {});
  const [query, setQuery] = useState(defaultQuery || '');
  const { data } = useQuery('Search', () => {
    return getSearchDropdownData();
  });

  const filteredData =
    data === ''
      ? data
      : data?.filter((data: any) => {
          return data.label.toLowerCase().includes(query.toLowerCase());
        });

  const handleChange = (event: ChangeEvent) => {
    console.log(event);
    setQuery((event.target as HTMLInputElement).value);
  };
  return (
    <>
      <Combobox value={selectedData} onChange={setSelectedData}>
        <Combobox.Input
          onChange={handleChange}
          displayValue={(data: any) => data.label}
        />
        <Combobox.Options className="cursor-pointer">
          {query.length > 0 && (
            <Combobox.Option className="hidden" value={{ label: query, type: 'search' }}>
              {query}
            </Combobox.Option>
          )}
          {filteredData?.map((data: any) => (
            <Combobox.Option key={data.label} value={data}>
              {data.label}
            </Combobox.Option>
          ))}
        </Combobox.Options>
      </Combobox>
    </>
  );
};

export default SearchBox;

Specifically, the up down arrows are not cycling through options.

[brianlovin]

I'm on version 1.6.2 and experiencing the same — even copy/pasting the default setup from the docs results in an element that doesn't work with the arrow keys.

[wherewego-nina]

Hey Brian, For me, it actually was working. I just didn’t have any of the “active” or “selected” styles in place. once i did that, it was working as expected. I was expecting the “active” items to appear focused but i think it works a little differently.

On Thu, May 19, 2022 at 11:08 PM Brian Lovin ***@***.***> wrote: I'm on version 1.6.2 and experiencing the same — even copy/pasting the default setup from the docs results in an element that doesn't work with the arrow keys. — Reply to this email directly, view it on GitHub <#1383 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AY3HMM6YPMBUMMN6AQTSQH3VK363TANCNFSM5UWXM4CQ> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

-- * Nina Horne - Director of Web Development* wherewego.org

[brianlovin]

Interesting, I'll try again with a fresh project later, but I had the selected and active stylings and still couldn't get things to work. Thanks for the heads up!