react-spectrum: Click events don't work on MacOS in Adobe CEP extension unless debugger is attached

πŸ› Bug Report

We are using the react-specturm in an Adobe CEP extension. On Windows, it works as expected. On MacOS, none of the controls are responsive. If we attach a chrome debugger to MacOS, the controls become responsive.

πŸ€” Expected Behavior

We would expect the controls to be responsive on both Windows and MacOS regardless of whether or not the debugger is attached.

😯 Current Behavior

The controls are not responsive. Button controls never have β€œonPress” event processed. For Picker controls, the popup for selecting an item never appears.

πŸ’ Possible Solution

πŸ”¦ Context

This will make it impossible for us to let MacOS users use our application.

πŸ’» Code Sample

      <Picker
        aria-label="Select Product"
        items={productList}
        onSelectionChange={(product) => setProduct(product as string)}
        selectedKey={product}
        marginBottom="size-50"
      >
        {(productLabel) => <Item key={productLabel.value}>{productLabel.label}</Item>}
      </Picker>
      <Button id="create-blank" variant="secondary" onPress={createBlankUi}>
        Create Blank
      </Button>

🌍 Your Environment

Software Version(s)
react-spectrum 3.1.0
Browser Embedded browser in Adobe Creative Suite 2020 (Illustrator and InDesign)
Operating System MacOS Catana (10.15.6)

🧒 Your Company/Team

πŸ•· Tracking Issue (optional)

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 25 (10 by maintainers)

Most upvoted comments

Yes. We have confirmed that deleting window.PointerEvent does work around the issue

It appears pointer events don’t fire in CEP extensions on Mac for some reason. I was able to dirtily work around this in my extension by just deleting window.PointerEvent on Mac so that they are assumed to be unsupported.

For those who are unfamiliar with html, here is how to delete window.PointerEvent: Simply add the snippet before closing the html.

<script> if (window.PointerEvent) { delete window.PointerEvent; } </script>

@lsh246 Sure, I’ll set a reminder for myself!

Yes, apart from it feeling a bit icky, I haven’t noticed any side effects from the workaround yet. 🀞

Yep, can confirm your findings @vonstring, thanks for digging. Since typeof PointerEvent is not undefined in the embedded browser, usePress chooses to use pointer events handlers rather than onMouseDown/onMouseUp/etc (see https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/interactions/src/usePress.ts#L293).

@tyang-cimpress @BrianHanechak This feels like a Adobe CEP issue, would be good to raise this with them. In the meantime, does the workaround @vonstring noted work for you?