fix: stop comment typing from triggering page shortcuts

Adds a keydown handler on the comment input that stops propagation
Keeps Enter-to-submit behavior working in the annotation overlay
Cleans up the new event listener when the overlay is removed
This commit is contained in:
Bohdan Triapitsyn
2026-08-14 19:16:18 +03:00
parent 3f266232f9
commit 5fbd1c0962
2 changed files with 14 additions and 2 deletions
@@ -61,6 +61,12 @@ describe('annotation overlay script', () => {
expect(script).toContain(JSON.stringify(labels.commentPlaceholder));
});
test('keeps comment keystrokes away from shortcuts on the annotated page', () => {
expect(script).toContain("comment.addEventListener('keydown', onCommentKeyDown)");
expect(script).toContain('var onCommentKeyDown = function (event) {');
expect(script).toContain('event.stopPropagation();');
});
test('escapes a label that would otherwise close the script', () => {
const hostile = buildAnnotationOverlayScript(theme, {
...labels,
@@ -534,9 +534,13 @@ export const buildAnnotationOverlayScript = (
event.preventDefault();
event.stopImmediatePropagation();
finish(null);
return;
}
if (event.key === 'Enter' && !event.shiftKey && event.target === comment) {
};
var onCommentKeyDown = function (event) {
// Do not let the annotated page treat typed letters as its own shortcuts.
event.stopPropagation();
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
attach();
}
@@ -551,6 +555,7 @@ export const buildAnnotationOverlayScript = (
window.addEventListener('scroll', onScrollOrResize, true);
window.addEventListener('resize', onScrollOrResize, true);
window.addEventListener('keydown', onKeyDown, true);
comment.addEventListener('keydown', onCommentKeyDown);
// ------------------------------------------------------------------ finish
@@ -564,6 +569,7 @@ export const buildAnnotationOverlayScript = (
window.removeEventListener('scroll', onScrollOrResize, true);
window.removeEventListener('resize', onScrollOrResize, true);
window.removeEventListener('keydown', onKeyDown, true);
comment.removeEventListener('keydown', onCommentKeyDown);
setCursor('');
if (cursorStyle.parentNode) cursorStyle.parentNode.removeChild(cursorStyle);
if (host.parentNode) host.parentNode.removeChild(host);