Portal/Popups incompatible with preact-compat

[jimmed]

TL;DR

When using Popups with preact-compat, the event object passed to handleOpen from the associated Portal does not contain a currentTarget property, due to the way the event object is being cloned. This throws an error, preventing the Popup from being displayed when it is triggered by a mouse event.

Steps

1. Create an application using preact-cli.
2. Install semantic-ui-react (and semantic-ui-css) as described in its documentation.
3. Alias preact-compat in place of React using Webpack, overriding the webpack config using the method described in preact-cli's documentation.
4. Render a Popup component like so:

const Component = () => <Popup trigger={<p>Hover me</p>} />

5. Mouse over the rendered component

Expected Result

• Popup is displayed.

Actual Result

• Popup is not displayed.
• Error thrown:

TypeError: Cannot read property `getBoundingClientRect' of undefined

Version

0.71.4

Testcase

Unable to provide test case, unless CodePen allows module aliasing

[layershifter]

PRs increasing interop with other libraries are very much welcomed. Closing for housekeeping as there are no errors with React and this library is intended to be used with React only.

[jimmed]

@layershifter Thanks for the response, and I understand that this is not an intended use case. I've started work on a fix, but won't raise a PR until I have proper test cases established.

[nialloc9]

I had this issue and fixed it by wrapping my trigger component in a div.

[rkosafo]

I wrapped my triggers component with a div but still getting that getBoundingClientRect with popup using preact. I had to move to preact to correct the issue with input cursor jumping to the end of the text.

@nialloc9 Where you getting this exact error (Cannot read property 'getBoundingClientRect' of undefined at Popup._this.handleOpen (Popup.js:59)) which was fixed by wrapping the component in a div or was it a different error?

[iMerica]

Issue persists for me