React-aria events are ignored in new window portal

312 Views Asked by At

I am using react-aria library for web app accessibility and I would like to render button in a new browser tab. First, I will define react-aria button:

const MyButton = props => {
    const ref = useRef();
    const { buttonProps } = useButton(props, ref);
    return <button {...buttonProps} />
}

Then, I will define component, that will render this button in a new tab

const WindowPortal = () => {
    const [isInitialized, setInitialized] = useState(false);
    const container = useMemo(() => document.createElement("div"), []);

    useEffect(() => {
        if (!container) return;
        const external = window.open("", "_blank");
        external.document.body.appendChild(container);
        setInitialized(true);
        return () => external.close();
    }, [container]);

    if (!container || !isInitialized) {
        return null;
    }

    return ReactDOM.createPortal(
        <>
            <MyButton onPress={() => console.log("My button is working!")}>My button</MyButton>
            <button onClick={() => console.log("Native button is working!")}>Native button</button>
        </>,
        container
    );
};

When <WindowPortal /> is rendered, new tab is opened and there are two buttons. When I click on the native one, everything is working. However, the react-aria one doesn't do anything on press.

Am I doing something wrong and is there any way to fix it? I have this problem not only for onPress for useButton, but for all events and interactions in react-aria.

0

There are 0 best solutions below