Managing focus between search field and unique search results container

[binaryartifex]

Ive been at this for the last 6 hours and i think (hope) its my lack of understanding of react-aria thats contributing to this epic failure. Long story short as part of the requested design spec, i need to achieve the following -

1. in app header component there is a persistent search bar. Search endpoint is called at minimum of 3 search characters.
2. If there are search results available, in comes in a single array of two distinct types - 'sites' and 'organisations'
3. The search result needs to automatically render under the search field as a TAB LIST. with two tabs - sites and organisations, with each tab have the list of relevant results items (each item is a rich search item incapsulated in an anchor tag)
4. The user needs to be able to focus between the search field and the tabs component.

At present ive implemented the search results to be within a typical popover, with the child of the popover being a typical tab list with each tab having an unordered list of anchor tabs. For the life of me I cannot switch focus between the search field and the overlaid search results. The tab ordering insists on continuing through the app header and focuses the menu buttons on the other side of the header. If i try to encapsulate the search and overlay result components, the focus doesn't work at all.

Each fleet item has only business specific props, wrapped in an anchor tag (which is wrapped in a li tag). Tabs, Items, Popovers and the Search field are all almost copy paste straight from the docs. It seems the capacity to navigate via keyboard between the search field and a popover element for the most part is not supported...unless ive missed something. any help is greatly appreciated.

Fleet Search Component

export function FleetSearch(props: FleetSearchProps) {
  const fieldRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const [term, setTerm] = useState("");
  const debounced = useDebounce(term, 300);
  const overlayState = useOverlayTriggerState({ defaultOpen: false });

  const { keyboardProps } = useKeyboard({
    onKeyUp: (event) => {
      if (event.key === "Escape") {
        overlayState.close();
        setTerm("");
      }
    },
  });

  useOnClickOutside(containerRef, () => {
    overlayState.close();
    setTerm("");
  });

  const { data, error, fetchStatus } = useQuery({
    queryKey: ["fleetSearch", debounced],
    queryFn: async () => promisifyTE(props.onFleetSearch({ term })),
    onSuccess: () => overlayState.open(),
    enabled: debounced.length >= 3,
    retry: false,
  });

  return (
    <div
      {...keyboardProps}
      ref={containerRef}
      className="relative w-full max-w-sm"
    >
      <FocusScope autoFocus>
        <SearchField
          onChange={setTerm}
          label="Fleet search"
          isLoading={fetchStatus === "fetching"}
          hideLabel
          hideHelperText
          ref={fieldRef}
          value={term}
        />
        <AnimatePresence>
          {overlayState.isOpen && (
            <Popover triggerRef={containerRef} state={overlayState} isNonModal>
              <FleetTabs data={data?.results} />
            </Popover>
          )}
        </AnimatePresence>
      </FocusScope>
    </div>
  );
}

Tab List to be rendered with results

export function FleetTabs({ data }: FleetTabsProps) {
  const ref = useRef<HTMLDivElement>(null);
  const { dialogProps } = useDialog({}, ref);

  const resources = useMemo(() => {
    return mapFleetResults(data);
  }, [data]);

  const disabledKeys = useMemo(() => {
    return [
      ...(resources.sites.disabled ? ["sites"] : []),
      ...(resources.organisations.disabled ? ["organisations"] : []),
    ];
  }, [resources]);

  return (
    <div {...dialogProps} className="w-screen max-w-sm p-4 lg:max-w-3xl">
      <Tabs
        aria-label="Fleet search results"
        disabledKeys={disabledKeys}
        orientation="horizontal"
      >
        <Item key="sites" title={resources.sites.title}>
          <ul>
            {resources.sites.results.map((item) => (
              <FleetListItem key={`site-${item.resourceId}`} {...item} />
            ))}
          </ul>
        </Item>
        <Item key="organisations" title={resources.organisations.title}>
          <ul>
            {resources.organisations.results.map((item) => (
              <FleetListItem
                key={`organisation-${item.resourceId}`}
                {...item}
              />
            ))}
          </ul>
        </Item>
      </Tabs>
    </div>
  );
}

[reidbarber]

It might be helpful if you put these in a codesandbox and include the link, so we can try it.

Also, we have a useSearchAutocomplete hook in pre-release that might be a better fit.

And does using a FocusScope help your use case?