useEscapeKey ​

useEscapeKey closes a floating context when Escape is pressed.

Type ​

function useEscapeKey(context: UseEscapeKeyContext, options?: UseEscapeKeyOptions): void;

interface UseEscapeKeyContext extends Pick<FloatingContext, "state"> {}

interface UseEscapeKeyOptions {
  enabled?: MaybeRefOrGetter<boolean>;
  capture?: boolean;
  preventDefault?: boolean;
  onEscape?: (event: KeyboardEvent) => void;
  ignoreEscapeKey?: (event: KeyboardEvent) => boolean;
}

Details ​

useEscapeKey listens on document and ignores Escape while IME composition is active. By default it closes the context with the escape-key reason.

• enabled lets you turn the listener on and off.
• capture defaults to false.
• preventDefault defaults to false.
• onEscape replaces the default close behavior when you need custom handling.
• ignoreEscapeKey is a predicate to determine if an escape key press should be ignored, allowing sub-components or child branches to handle the escape event first.

Example ​

<script setup lang="ts">
import { ref } from "vue";
import { useClick, useEscapeKey, useFloatingContext, usePosition } from "v-float";

const anchorEl = ref<HTMLElement | null>(null);
const floatingEl = ref<HTMLElement | null>(null);

const context = useFloatingContext({ refs: { anchorEl, floatingEl } });
const { styles } = usePosition(context);
useClick(context);
useEscapeKey(context);
</script>

<template>
  <button ref="anchorEl">Toggle</button>

  <div v-if="context.state.open.value" ref="floatingEl" :style="styles">Press Escape to close</div>
</template>

See Also ​

• useClick
• useFocus
• useFocusTrap