Does not work when rendered inside an iframe

Descrizione

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.

Come iniziare

Leggi tutta la issue e poi la guida ai contributi del progetto.

Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.

Fai un fork del repository e lavora su un branch.

Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia individuando il codice di posizionamento del trigger e del popup che verifica HTMLBodyElement e HTMLHtmlElement con instanceof. Riproduci l’esempio di iframe in TypeScript fornito e verifica come il calcolo dell’area visibile gestisce gli elementi appartenenti a un altro documento. Il lavoro è completato quando l’allineamento del trigger e del popup funziona correttamente sia all’interno dei documenti iframe sia nel documento padre.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico

react, typescript

Ambito

frontend

Tipo di issue

Bug

Difficoltà

3/5

Tempo stimato

1-2 giorni

Stato di attività

Tranquilla

Chiarezza

Abbastanza chiara

Idoneità per principianti

58/100