StickyPanel

StickyPanel(__namedParameters): ReactElement<{ ref: RefObject<OverlayRootWidget | null>; }, string | JSXElementConstructor<any>> | null

Defined in: react/components/overlay/sticky-panel.tsx:85

A non-modal floating panel that overlays the UI without stealing focus — the control below (e.g. a chat input) keeps focus and keeps receiving text. The panel can be driven entirely by the mouse, and may claim specific keys via StickyPanelProps.onKeyIntercept while letting the rest fall through.

This is the building block for slash-command / @-mention popups: the user keeps typing into the input, the panel filters its list as they type, arrow keys move the highlight, and Enter confirms — all while the input stays focused. Clicks outside the panel pass through to whatever is underneath.

Attach it to the control it relates to with anchorRef (recommended), or place it manually via panelStyle:

<StickyPanel
  open={menuOpen}
  anchorRef={inputRef}
  placement="above"
  panelStyle={{ width: 30 }}
  onKeyIntercept={handleMenuKey}
>
  {commands.map((c) => <Label key={c}>{c}</Label>)}
</StickyPanel>

Parameters

__namedParameters

StickyPanelProps

Returns

ReactElement<{ ref: RefObject<OverlayRootWidget | null>; }, string | JSXElementConstructor<any>> | null