useGridOverlay

Register a custom overlay panel (popover, listbox, calendar, color picker) as part of the active editor so the grid does not commit and exit row edit when focus or pointer interaction enters the panel.

Mirrors the Angular BaseOverlayEditor contract for React custom editors. Wires registerExternalFocusContainer(panel) on mount/open and unregisterExternalFocusContainer(panel) on unmount/close.

Pair with ColumnEditorContext.grid (see DataGridElement) when the panel is rendered outside any <DataGrid> provider.

useGridOverlay(panelRef: RefObject<HTMLElement | null>, options: UseGridOverlayOptions): void

Parameters

Name	Type	Description
panelRef	RefObject<HTMLElement | unknown>	Ref to the overlay panel DOM element. The hook is a
no-op while panelRef.current is null.
options	UseGridOverlayOptions	UseGridOverlayOptions.

Example

function AutocompleteEditor({ value, commit, cancel }: GridEditorContext<Row>) {
  const [open, setOpen] = useState(false);
  const panelRef = useRef<HTMLDivElement | null>(null);
  useGridOverlay(panelRef, { open });
  return (
    <>
      <input
        aria-expanded={open}
        aria-controls="ac-listbox"
        onClick={() => setOpen(true)}
        onKeyDown={(e) => e.key === 'Enter' && commit(e.currentTarget.value)}
      />
      {open &&
        createPortal(
          <div id="ac-listbox" ref={panelRef} role="listbox">
            {options}
          </div>,
          document.body,
        )}
    </>
  );
}