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.

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

Parameters

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

Example

<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>