Intercept keystrokes via overlay
This commit is contained in:
parent
8e6e717a84
commit
480b3ab148
2 changed files with 42 additions and 1 deletions
|
|
@ -14,4 +14,33 @@ describe("intercept-overlay.vue", () => {
|
|||
expect(wrapper.text()).toBe("");
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,22 @@
|
|||
<template>
|
||||
<div class="intercept-overlay" aria-hidden="true"></div>
|
||||
<div class="intercept-overlay" aria-hidden="true" @keydown.capture="blockKey"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue