Focus isn't working when Shadow DOM is used #6033
Description
Provide a general summary of the issue here
I have a web component built with react and react-to-web-component library. The problem is Shadow DOM and data-focused="true" for selects and some other elements as well.
data-focused="true" doesn't work inside of Shadow DOM. It works only when I disable Shadow DOM:
import r2wc from "@r2wc/react-to-web-component";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import React from "react";
import App from "./app";
import "./index.scss";
const queryClient = new QueryClient();
type CalendarProps = {
container: ShadowRoot;
};
const CalendarComponent: React.FC<CalendarProps> = (props: CalendarProps) => {
const link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", "/static/visual-rates-tape/style.css");
props.container.appendChild(link);
return (
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<App />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</React.StrictMode>
);
};
if (!customElements.get("calendar-component")) {
customElements.define(
"calendar-component",
r2wc(CalendarComponent, {
props: { container: "json" },
// shadow: "open",
}),
);
}
🤔 Expected Behavior?
The select should focused like on the screenshot (disabled Shadow DOM)
😯 Current Behavior
The select is not focused (enabled Shadow DOM).
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
Add a select input inside of shadow-root (open).
Version
react-aria-components v1.1.1
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
Mac
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response