Blur on Escape directive #svelte #directive #typescript

blur-on-escape.ts

export interface Options {
	bubble: boolean;
}

// When applied to an input, it will blur the input when the escape key is pressed
// By default it will prevent the default action of the escape key, which is useful
// for inputs in dialogs
export default function blurOnEscape(node: HTMLElement, options: Options = { bubble: false }) {
	const onKeydown = (event: KeyboardEvent) => {
		if (event.key !== 'Escape') return;

		node.blur();
		if (!options.bubble) {
			event.preventDefault();
		}
	};

	node.addEventListener('keydown', onKeydown);

	return {
		destroy: () => node.removeEventListener('keydown', onKeydown),
	};
}