position: fixed dropdowns go off-screen inside animated panels — the CSS transform trap

Symptom

An autocomplete/people-picker dropdown works perfectly in a normal page — then you mount the same component inside a slide-in side panel and the dropdown vanishes. The search works (network tab full of results, state updates firing), but nothing visible appears. Sometimes it renders in a bizarre corner instead.

Cause

Pure CSS, no SharePoint involved: an ancestor with transform (also filter, perspective, or certain will-change values) becomes the containing block even for position: fixed descendants. Slide-in panels animate with transform: translateX(…) — so your "fixed to the viewport" dropdown is silently fixed to the panel instead, and coordinates computed from getBoundingClientRect() (viewport-relative) put it far outside the panel's box — typically off-screen.

The cruelty: translateX(0) after the animation finishes still counts. The panel looks static; the containing block trap remains.

Fix

Render the dropdown through a portal to document.body — out of the transformed subtree — and position it from the input's viewport rect:

const rect = inputRef.current.getBoundingClientRect();
// state: { top: rect.bottom + 2, left: rect.left, width: rect.width }

{open && ReactDOM.createPortal(
  <div style={{ position: 'fixed', top: pos.top, left: pos.left, width: pos.width, zIndex: 2000 }}>
    {results.map(renderItem)}
  </div>,
  document.body
)}

Rule of thumb: any floating element (dropdown, tooltip, menu) inside any animated overlay goes through a portal. Make it the default and you'll never debug this again.

Notes

• Select items with onMouseDown, not onClick — mousedown fires before the input's onBlur, so the dropdown doesn't close a tick before the click lands.
• Close-on-outside-click: a document-level mousedown listener (or onBlur with a short timeout) — remember the portal means the dropdown is not a DOM child of your component, so contains() checks must include the portal node.
• Reposition on scroll/resize if the overlay's content can scroll under the input.
• Diagnostic signature: "works on the page, invisible in the panel, console shows results" → it's this, every time.