Intercept keystrokes via overlay

This commit is contained in:
scottkiener-at-safelite 2026-06-29 09:32:03 -04:00
parent 8e6e717a84
commit 480b3ab148
2 changed files with 42 additions and 1 deletions

View file

@ -14,4 +14,33 @@ describe("intercept-overlay.vue", () => {
expect(wrapper.text()).toBe(""); expect(wrapper.text()).toBe("");
wrapper.unmount(); wrapper.unmount();
}); });
describe("keyboard interception", () => {
test("adds a capturing keydown listener on mount and removes it on unmount", () => {
const addSpy = jest.spyOn(document, "addEventListener");
const removeSpy = jest.spyOn(document, "removeEventListener");
const wrapper = shallowMount(interceptOverlay);
expect(addSpy).toHaveBeenCalledWith("keydown", expect.any(Function), true);
const [, handler] = addSpy.mock.calls.find(
([type, , capture]) => type === "keydown" && capture === true
);
wrapper.unmount();
expect(removeSpy).toHaveBeenCalledWith("keydown", handler, true);
addSpy.mockRestore();
removeSpy.mockRestore();
});
test("blockKey prevents default and stops immediate propagation", () => {
const wrapper = shallowMount(interceptOverlay);
const event = { preventDefault: jest.fn(), stopImmediatePropagation: jest.fn() };
wrapper.vm.blockKey(event);
expect(event.preventDefault).toHaveBeenCalled();
expect(event.stopImmediatePropagation).toHaveBeenCalled();
wrapper.unmount();
});
});
}); });

View file

@ -1,10 +1,22 @@
<template> <template>
<div class="intercept-overlay" aria-hidden="true"></div> <div class="intercept-overlay" aria-hidden="true" @keydown.capture="blockKey"></div>
</template> </template>
<script> <script>
export default { export default {
name: "intercept-overlay", name: "intercept-overlay",
mounted() {
document.addEventListener("keydown", this.blockKey, true);
},
beforeUnmount() {
document.removeEventListener("keydown", this.blockKey, true);
},
methods: {
blockKey(event) {
event.preventDefault();
event.stopImmediatePropagation();
},
},
}; };
</script> </script>