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.