Any idea why onPress would not work in iframe?

[stefanprobst]

when a component using @react-aria/button is rendered in an iframe via react-frame-component (e.g. like in the Netlify CMS preview pane), the onPress event does not seem to do anything, while a regular onClick seems to work fine. do you have any idea what could be going on here?

the issue can also be reproduced with a this create-react-app setup:

// src/App.js
import { useButton } from "@react-aria/button";
import { useRef } from "react";
import Frame from "react-frame-component";

export default function App() {
  return (
    <div>
      <Frame>
        <FrameContent />
      </Frame>
    </div>
  );
}

function FrameContent() {
  const buttonRef = useRef(null);
  const { buttonProps } = useButton(
    {
      // FIXME: `onClick` does trigger the alert, but `onPress` does not.
      // onClick() {
      //   alert();
      // },
      onPress() {
        alert();
      },
    },
    buttonRef
  );

  return (
    <main>
      <h1>Hello from iframe</h1>
      <button ref={buttonRef} {...buttonProps}>
        Click me
      </button>
    </main>
  );
}

[stefanprobst]

so it looks like the addGlobalListener event target here needs to be set to the iframe's document. i can make the onPress fire with this (and adding document as a second argument here):

import { useButton } from "@react-aria/button";
import { useRef } from "react";
import Frame, { FrameContextConsumer } from "react-frame-component";

export default function App() {
  return (
    <div>
      <Frame>
        <FrameContextConsumer>
          {({ document }) => <FrameContent document={document} />}
        </FrameContextConsumer>
      </Frame>
    </div>
  );
}

function FrameContent({ document }) {
  const buttonRef = useRef(null);
  const { buttonProps } = useButton(
    {
      onPress() {
        alert();
      },
    },
    buttonRef
  );

  return (
    <main>
      <h1>Hello from iframe</h1>
      <button
        ref={buttonRef}
        {...buttonProps}
        onPointerDown={(e) => {
          buttonProps.onPointerDown(e, document);
        }}
      >
        Click me
      </button>
    </main>
  );
}

is there currently a built-in way to make onPress attach global listeners to a specified document?

[snowystinger]

there is no way currently. I'm not sure I understand why or how this would work though? the document should be the iframe document already if it runs inside the iframe?
I also don't know how React Frame Component works :) does that code not actually run in the iframe?

[stefanprobst]

I also don't know how React Frame Component works

me neither :) from what i understand, Netlify CMS uses react-frame-component mainly for style encapsulation. with react-frame-component, the parent and the iframe content both seem to be rendered by the same react instance, which seems to also imply that the content placed in the iframe has the same global document/window (?), and to get the iframe's document, it needs to be explicitly retrieved via a context provider o_O.

one idea around this could be to maybe get the document from event.target.ownerDocument here in usePress.

[snowystinger]

Interesting, would you be willing to put up a POC pull request? I have a feeling though that this is going to be a very widespread change, we have a bigger than zero number of document event listeners in our code. Most problematically I think, modal click outside handling.
How would you even do modals in React Frame Component anyways?

[stefanprobst]

would you be willing to put up a POC pull request?

yes sure! (i'll come back to this after my vacation)