Does not work when rendered inside an iframe
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Anfängerfreundlichkeit
- 58/100
- Issue-Typ
- Bug
- Klarheit
- Größtenteils klar
- Aktivitätsstatus
- Ruhig
- Tech-Stack
- react, typescript
- Bereich
- frontend
Rechercherichtung
Beginne damit, den Code für Trigger und Popup-Positionierung zu finden, der HTMLBodyElement und HTMLHtmlElement mit instanceof prüft. Reproduziere das bereitgestellte TypeScript-iframe-Beispiel und untersuche, wie die Berechnung des sichtbaren Bereichs Elemente aus einem anderen Dokument behandelt. Die Aufgabe ist abgeschlossen, wenn die Ausrichtung von Trigger und Popup sowohl innerhalb von iframe-Dokumenten als auch im übergeordneten Dokument korrekt funktioniert.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
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.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 391
- Forks
- 245
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus react-component/trigger
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 65/100
react-component/trigger#593 · 1 Reaktion ·
-
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 65/100
react-component/trigger#618 · 1 Kommentar ·
-
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 42/100
react-component/trigger#555 ·
-
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 55/100
react-component/trigger#550 · 1 Kommentar ·
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100
react-component/trigger#495 ·
Alle Issues in react-component/trigger
Ähnliche Issues
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
0xMiden/bridge-portal#132 ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 78/100
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 82/100
-
area:tools bug good first issue help wanted priority:P2
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 90/100
TaewoooPark/Motifcode#14 ·
-
bug
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
newrelic-experimental/preflight#793 · 1 Kommentar ·