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("");
|
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();
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue