# useGridOverlay

> _Since v1.4.0_

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.

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

## Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `panelRef` | <code>RefObject&lt;HTMLElement &#124; unknown&gt;</code> | Ref to the overlay panel DOM element. The hook is a
  no-op while `panelRef.current` is `null`. |
| `options` | <code><a href="/grid/react/api/types/usegridoverlayoptions/">UseGridOverlayOptions</a></code> | UseGridOverlayOptions. |

#### Example

```tsx
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,
        )}
    </>
  );
}
```