Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

autoResize misses absolutely-positioned portal growth (popover opens → no size-changed)

Aperta
  • Qualcosa non va?
#686 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
56/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
api, frontend

Direzione di ricerca

Inizia da setupSizeChangedNotifications e confronta i relativi trigger e la misurazione di ResizeObserver con il workaround di body MutationObserver descritto qui e in direction #619. Usa l’harness del wire contract che pilota AppBridge per verificare che l’apertura di un popover basato su portal emetta ui/notifications/size-changed con un’altezza che includa il contenuto out-of-flow.

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

Descrizione

Problem

With autoResize: true (the useApp() default), opening any portal-based popover — a date-picker calendar, a Select dropdown, a tooltip — never emits ui/notifications/size-changed, so the host iframe stays at the pre-popover height and the popover is clipped.

Two independent gaps in setupSizeChangedNotifications (v1.7.4):

  1. Trigger gap: the ResizeObserver watches only document.documentElement and document.body border-boxes. Component libraries (Mantine, Radix, MUI, Floating UI…) render popovers into an absolutely-positioned portal appended to <body> — typically inside a zero-height positioned wrapper. Neither observed border-box changes, so no measurement is ever scheduled.
  2. Measurement gap: even when a measure does run, it reports documentElement.getBoundingClientRect().height under a transient height: max-content — which excludes out-of-flow content. An absolutely-positioned dropdown extending past the in-flow content does not contribute, so the reported height is unchanged anyway. (#619's proposed body.scrollHeight measure would fix this half, but not gap 1.)

Repro

Any React app embedded via the SDK:

const { app } = useApp({ appInfo, capabilities: {} }); // autoResize default
// render a Mantine <DatePickerInput /> near the bottom of the content

Click the input → calendar opens in a portal, extends ~300px past the content → no size-changed notification → host iframe clips the calendar. Verified against a host that resizes the iframe to every reported height (our wire-contract harness drives AppBridge directly).

Workaround we ship

A MutationObserver on body funnelled through the public API:

useEffect(() => {
  if (!app) return;
  const report = () =>
    app.sendSizeChanged({
      width: Math.ceil(window.innerWidth),
      height: Math.max(
        document.body.scrollHeight,
        document.documentElement.scrollHeight,
      ),
    });
  const mo = new MutationObserver(report);
  mo.observe(document.body, { childList: true, subtree: true, attributes: true });
  return () => mo.disconnect();
}, [app]);

scrollHeight includes the out-of-flow portal; the MutationObserver supplies the missing trigger.

Suggested fix

In setupSizeChangedNotifications, add a (debounced) MutationObserver on body alongside the existing ResizeObserver, and measure with Math.max(body.scrollHeight, documentElement.scrollHeight) (compatible with the direction #619 proposes) so out-of-flow portals are both detected and measured.

Related: #502 (height-management umbrella), #619 (measurement strategy), #567 (auto-resize side effects).

Lingua principale
TypeScript
Stelle
2.9k
Fork
394
Merge medio
4h 35m
PR unite (30g)
13

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di modelcontextprotocol/ext-apps

Tutte le issue di modelcontextprotocol/ext-apps

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.