# 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` and React `useGridOverlay`
contracts for Vue custom editors. Wires
`registerExternalFocusContainer(panel)` while open and
`unregisterExternalFocusContainer(panel)` on close / unmount.

Pair with `ColumnEditorContext.grid` when the panel is rendered outside
any `<TbwGrid>` provider.

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

## Parameters

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

#### Example

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { useGridOverlay } from '@toolbox-web/grid-vue';

const props = defineProps<{ value: string; commit: (v: string) => void; cancel: () => void }>();
const open = ref(false);
const panelRef = ref<HTMLElement | null>(null);
useGridOverlay(panelRef, { open });
</script>

<template>
  <input
    role="combobox"
    :aria-expanded="open"
    aria-controls="ac-listbox"
    :value="props.value"
    @click="open = true"
    @keydown.escape="props.cancel()"
  />
  <Teleport to="body" v-if="open">
    <div id="ac-listbox" ref="panelRef" role="listbox">
      <!-- options that call props.commit(option) -->
    </div>
  </Teleport>
</template>
```