How do I make components not inert inside a dialog?

[revosw]

The ListboxOptions becomes inert when added inside a dialog. The ListboxButton behaves as it should.

Here is a link to stackblitz
https://stackblitz.com/github/revosw/headlessui_inert_nested?file=src%2FApp.tsx

It seems related to this issue
#3421

[revosw]

The hack ChatGPT I came up with for now is to use a MutationObserver for the document

import { useEffect } from "react";

// Function to remove 'inert' attribute from elements
function removeInertAttribute(target) {
	if (target.hasAttribute && target.hasAttribute("inert")) {
		target.removeAttribute("inert");
	}
}

// Function to recursively remove 'inert' from all child elements
function removeInertFromSubtree(node) {
	removeInertAttribute(node);
	node.querySelectorAll("[inert]").forEach((el) => el.removeAttribute("inert"));
}

// Set up the MutationObserver to watch for changes in the DOM
const observer = new MutationObserver((mutations) => {
	mutations.forEach((mutation) => {
		// Check if new nodes are added
		mutation.addedNodes.forEach((node) => {
			if (node.nodeType === 1) {
				// Only process element nodes
				removeInertFromSubtree(node);
			}
		});

		// Check if attributes are changed
		if (mutation.type === "attributes" && mutation.attributeName === "inert") {
			removeInertAttribute(mutation.target);
		}
	});
});

export function useRemoveInert() {
	useEffect(() => {
		// Start observing the document
		observer.observe(document.body, {
			childList: true, // Watch for additions/removals of child nodes
			subtree: true, // Observe all levels of the DOM
			attributes: true, // Watch for attribute changes
			attributeFilter: ["inert"], // Only watch for changes to 'inert' attribute
		});

		// Also remove inert from all current elements when the script runs
		document
			.querySelectorAll("[inert]")
			.forEach((el) => el.removeAttribute("inert"));

		return () => observer.disconnect();
	}, []);
}

Then just use the hook in App.tsx or similar

function App() {
  useRemoveInert();
  // ..rest of component
}