Finding headless ui components through the DOM

[haykkh]

We have a use case where we need to find headless ui elements (and sometimes check their state) from elsewhere in the app.

Currently we use document.querySelector to either search for the state ([data-headlessui-state~="open"]) or matching ids ([id^="headlessui"]), but querySelector can be quite slow. Ideally we'd be able to check for classes with eg getElementsByClassName (80-90% more performant than querySelector for our use cases), but headless ui components don't have any fixed class names.

Has anybody else run into this problem before? And is there any particular reason that the components don't also have fixed class names? Thanks!

[RobinMalfait]

Hmm interesting question. One thing you could do is add your own identifiers using data attributes for example: https://codesandbox.io/s/silly-spence-49ds5t?file=/src/App.js

import { Menu } from "@headlessui/react";

export default function MyDropdown() {
  return (
    <Menu>
      <Menu.Button data-menu-button>More</Menu.Button>
      <Menu.Items data-menu-items>
        <Menu.Item data-menu-item>
          {({ active }) => (
            <a
              className={`${active && "bg-blue-500"}`}
              href="/account-settings"
            >
              Account settings
            </a>
          )}
        </Menu.Item>
        <Menu.Item data-foo>
          {({ active }) => (
            <a
              className={`${active && "bg-blue-500"}`}
              href="/account-settings"
            >
              Documentation
            </a>
          )}
        </Menu.Item>
        <Menu.Item disabled data-bar>
          <span className="opacity-75">Invite a friend (coming soon!)</span>
        </Menu.Item>
      </Menu.Items>
    </Menu>
  );
}

Would that work for you?

[haykkh]

This would also have to be queried with document.querySelector so will face the same performance penalties