react-component / react-component/trigger
Does not work when rendered inside an iframe
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 391
- Forks
- 245
- PR merge metrics
- No merged PRs in 30d
Description
Minimal reproduction
import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import RcTooltip from 'rc-tooltip';
import 'rc-tooltip/assets/bootstrap.css';
function IframeContent({ container }: { container: HTMLElement }) {
return createPortal(
<RcTooltip
overlay="Hello from tooltip"
placement="top"
getTooltipContainer={() => container}
>
<button>Hover me</button>
</RcTooltip>,
container,
);
}
export default function App() {
const iframeRef = useRef<HTMLIFrameElement>(null);
const [mountEl, setMountEl] = useState<HTMLElement | null>(null);
useEffect(() => {
const iframe = iframeRef.current;
if (!iframe) return;
const onLoad = () => {
setMountEl(iframe.contentDocument?.body ?? null);
};
iframe.addEventListener('load', onLoad);
if (iframe.contentDocument?.readyState === 'complete') onLoad();
return () => iframe.removeEventListener('load', onLoad);
}, []);
return (
<>
<iframe
ref={iframeRef}
srcDoc="<!DOCTYPE html><html><body></body></html>"
style={{ width: '100%', height: 200, border: '1px solid #ccc' }}
/>
{mountEl && <IframeContent container={mountEl} />}
</>
);
}
Expected behavior
@rc-component/trigger should support trigger and popup elements rendered inside iframe documents.
Popup positioning and visible area calculation should work regardless of whether the DOM elements come from the parent document or an iframe document.
Actual behavior
When rendered inside an iframe, popup alignment/visible area calculation can be incorrect because iframe <body> and <html> elements fail the instanceof HTMLBodyElement / instanceof HTMLHtmlElement checks.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the trigger and popup positioning code that checks HTMLBodyElement and HTMLHtmlElement with instanceof. Reproduce the provided TypeScript iframe example and inspect how visible-area calculation handles elements from another document. Done means trigger and popup alignment work correctly inside iframe documents as well as the parent document.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100