fix: Capture Swallows Later Input

Author: Ajit Kumar

src/handlers/quickTools.js

@@ -69,6 +69,20 @@ function adapterAction(action, value) {
 	return null;
 }
 
+function finishAdapterCapture() {
+	const restoreFocus =
+		(adapterCapture && !adapterCapture.consumed) ||
+		document.activeElement === quickTools.$input;
+	// Blurring may emit composition events synchronously. Keep an inert guard
+	// for those events without leaving the hidden input as the typing target.
+	if (adapterCapture) adapterCapture.consumed = true;
+	clearQuickToolsModifierState();
+	quickToolsAdapters.discardCapture();
+	quickTools.$input.value = "";
+	quickTools.$input.blur();
+	if (restoreFocus) quickToolsAdapters.focus();
+}
+
 function handleAdapterCapture(event) {
 	if (!adapterCapture) return false;
 	if (
@@ -111,12 +125,14 @@ function handleAdapterCapture(event) {
 			...modifiers,
 		});
 	} else {
-		if (result.outcome.kind === "duplicate") event.preventDefault();
+		if (result.outcome.kind === "duplicate") {
+			quickTools.$input.value = "";
+			event.preventDefault();
+		}
 		return true;
 	}
-	if (!event.isComposing) quickTools.$input.value = "";
 	event.preventDefault();
-	clearQuickToolsModifierState();
+	finishAdapterCapture();
 	return true;
 }
 
@@ -343,6 +359,7 @@ export function clearQuickToolsModifierState({ restoreFocus = false } = {}) {
 
 export function cancelQuickToolsModifierInput() {
 	adapterCapture = null;
+	quickToolsAdapters.discardCapture();
 	clearReadOnlyCaptureSession();
 	const changed = clearQuickToolsModifierState();
 	quickTools.$input.value = "";
@@ -368,7 +385,11 @@ export default function actions(action, value) {
 	if (routed) {
 		if (routed.type === "command" && routed.command === "openCommandPalette")
 			return executeCommand("openCommandPalette", editor);
-		if (!quickToolsAdapters.available(routed)) return false;
+		if (!quickToolsAdapters.available(routed)) {
+			if (!Object.values(state).some(Boolean))
+				quickToolsAdapters.discardCapture();
+			return false;
+		}
 		if (routed.type === "modifier") {
 			quickToolsAdapters.capture();
 			state[action] = !state[action];
@@ -389,7 +410,7 @@ export default function actions(action, value) {
 		}
 		const handled = quickToolsAdapters.dispatch(routed);
 		if (routed.type !== "key" || !routed.key.startsWith("Arrow"))
-			clearQuickToolsModifierState();
+			finishAdapterCapture();
 		return handled;
 	}
 

src/handlers/quickToolsInit.js

@@ -4,11 +4,11 @@ import quickTools from "components/quickTools";
 import { description } from "components/quickTools/items";
 import { hideTooltip, showTooltip } from "components/tooltip";
 import config from "lib/config";
-import appSettings from "lib/settings";
-import actions, { cancelQuickToolsModifierInput, key } from "./quickTools";
+import { syncQuickToolsVisibility } from "lib/editorFile";
 import quickToolsAdapters from "lib/quickToolsAdapter";
 import { watchQuickToolsOverlays } from "lib/quickToolsOverlays";
-import { syncQuickToolsVisibility } from "lib/editorFile";
+import appSettings from "lib/settings";
+import actions, { cancelQuickToolsModifierInput, key } from "./quickTools";
 
 const CONTEXT_MENU_TIMEOUT = 500;
 const MOVE_X_THRESHOLD = 50;
@@ -53,6 +53,12 @@ function clearTouchFeedback() {
 	}
 }
 
+function discardAdapterCapture() {
+	// Modifier sequences keep their selection until a key is dispatched.
+	if (!key.shift && !key.ctrl && !key.alt && !key.meta)
+		quickToolsAdapters.discardCapture();
+}
+
 /**
  * Initialize quick tools
  * @param {HTMLElement} $footer
@@ -88,12 +94,24 @@ export default function init() {
 		refreshAdapter();
 	});
 	watchQuickToolsOverlays(quickToolsAdapters, cancelAdapterInput);
-	$footer.addEventListener(
-		"pointerdown",
-		() => quickToolsAdapters.capture(),
-		true,
-	);
-	$footer.addEventListener("keydown", () => quickToolsAdapters.capture(), true);
+	const capture = () => {
+		discardAdapterCapture();
+		quickToolsAdapters.capture();
+	};
+	$footer.addEventListener("pointerdown", capture, true);
+	$footer.addEventListener("keydown", capture, true);
+	$footer.addEventListener("pointercancel", discardAdapterCapture, true);
+	$footer.addEventListener("scroll", discardAdapterCapture, true);
+	const leaveQuickTools = (event) => {
+		if (!quickToolsAdapters.has()) return;
+		const path = event.composedPath();
+		if (path.includes($footer) || path.includes($input)) return;
+		quickToolsAdapters.discardCapture();
+		if (key.shift || key.ctrl || key.alt || key.meta)
+			cancelQuickToolsModifierInput();
+	};
+	document.addEventListener("pointerdown", leaveQuickTools, true);
+	document.addEventListener("focusin", leaveQuickTools, true);
 
 	$toggler.addEventListener("click", (e) => {
 		e.preventDefault();
@@ -189,6 +207,7 @@ export default function init() {
 
 function onwheel(e) {
 	e.preventDefault();
+	discardAdapterCapture();
 	const $el = e.target;
 	const { $row1, $row2 } = quickTools;
 	let $row;
@@ -208,6 +227,7 @@ function onclick(e) {
 	reset();
 
 	if (e.target.disabled) {
+		discardAdapterCapture();
 		e.preventDefault();
 		e.stopPropagation();
 		return;
@@ -344,11 +364,10 @@ function touchend(e) {
 		}
 
 		$row.scrollLeft = scroll;
-		touchcancel(e);
-
-		if ($el === $touchstart && performance.now() - startTime < 100) {
-			click($el);
-		}
+		const shouldClick =
+			$el === $touchstart && performance.now() - startTime < 100;
+		touchcancel(e, { preserveCapture: shouldClick });
+		if (shouldClick) click($el);
 		return;
 	}
 
@@ -357,15 +376,15 @@ function touchend(e) {
 		return;
 	}
 
-	touchcancel(e);
+	touchcancel(e, { preserveCapture: true });
 	click($el);
 }
 
 /**
  *
  * @param {TouchEvent} e
  */
-function touchcancel(e) {
+function touchcancel(e, { preserveCapture = false } = {}) {
 	document.removeEventListener("keyup", touchcancel);
 	document.removeEventListener("touchend", touchend);
 	document.removeEventListener("touchcancel", touchcancel);
@@ -374,6 +393,7 @@ function touchcancel(e) {
 	clearTimeout(contextmenuTimeout);
 	clearTouchFeedback();
 	hideTooltip();
+	if (!preserveCapture) discardAdapterCapture();
 }
 
 /**
@@ -414,7 +434,10 @@ function oncontextmenu(e) {
  * @param {HTMLElement} $el
  */
 function click($el) {
-	if ($el.disabled) return;
+	if ($el.disabled) {
+		discardAdapterCapture();
+		return;
+	}
 
 	$el.classList.add("click");
 	clearTimeout($el.dataset.timeout);
@@ -427,15 +450,22 @@ function click($el) {
 	}
 
 	const { action } = $el.dataset;
-	if (!action) return;
+	if (!action) {
+		discardAdapterCapture();
+		return;
+	}
 
 	let { value } = $el.dataset;
 
 	if (!value) {
 		value = $el.value;
 	}
 
-	actions(action, value);
+	try {
+		actions(action, value);
+	} finally {
+		discardAdapterCapture();
+	}
 }
 
 function scheduleUpdateQuickToolsState() {

src/lib/editorFile.js

@@ -15,9 +15,9 @@ import confirm from "dialogs/confirm";
 import DOMPurify from "dompurify";
 import startDrag from "handlers/editorFileTab";
 import actions from "handlers/quickTools";
-import quickToolsAdapters from "lib/quickToolsAdapter";
 import { openTabContextMenuOnRelease } from "handlers/tabContextMenu";
 import tag from "html-tag-js";
+import quickToolsAdapters from "lib/quickToolsAdapter";
 import mimeTypes from "mime-types";
 import { applyHighlightStyles } from "utils/codeHighlight";
 import helpers from "utils/helpers";

src/lib/quickToolsAdapter.js

@@ -120,10 +120,18 @@ export function createQuickToolsAdapterRegistry(
 			// Capture failures are reported by dispatch, without an unhandled rejection.
 			entry.selection.catch(() => {});
 		},
+		discardCapture() {
+			// Dispatched actions already own their snapshots. Leave their queue intact.
+			const entry = current();
+			if (entry) entry.selection = undefined;
+		},
 		dispatch(action) {
 			const entry = current();
 			if (!entry) return false;
-			if (!this.available(action)) return true;
+			if (!this.available(action)) {
+				this.discardCapture();
+				return true;
+			}
 			const signal = entry.controller.signal,
 				selection = entry.selection;
 			entry.selection = undefined;

src/pages/fileBrowser/fileBrowser.scss

@@ -3,20 +3,20 @@
     display: none;
   }
 
-  .tile {
-    > .icon:first-child {
-      --file-icon-size: 24px;
-      font-size: var(--file-icon-size);
-      background-size: var(--file-icon-size);
-      background-position: center;
-
-      > svg, > img {
-        width: var(--file-icon-size);
-        height: var(--file-icon-size);
-        object-fit: contain;
-      }
+  #list .tile > .icon:first-child {
+    --file-icon-size: 24px;
+    font-size: var(--file-icon-size);
+    background-size: var(--file-icon-size);
+    background-position: center;
+
+    > svg, > img {
+      width: var(--file-icon-size);
+      height: var(--file-icon-size);
+      object-fit: contain;
     }
+  }
 
+  .tile {
     &[data-storage-type="notification"] {
       background-color: rgb(153, 153, 255);
       background-color: var(--primary-color);

tests/unit/quickToolsAdapter.test.js

@@ -103,5 +103,23 @@ describe("custom-tab quicktools", () => {
 		f.registry.focus(); f.registry.cancel(); await settle();
 		expect(f.adapter.focus).not.toHaveBeenCalled();
 	});
+	it("discards unused captures without cancelling an already queued edit", async () => {
+		const f = setup(); let finish, caret = 3;
+		f.adapter.captureSelection.mockImplementation(() => caret);
+		f.adapter.restoreSelection.mockImplementation(value => { caret = value; });
+		f.adapter.execute.mockImplementationOnce(() => new Promise(resolve => { finish = resolve; }));
+		f.registry.capture(); f.registry.dispatch(insert);
+		await settle();
+		const signal = f.adapter.execute.mock.calls[0][1].signal;
+		f.registry.capture(); f.registry.discardCapture();
+		finish(); await settle();
+		caret = 20;
+		f.registry.capture(); f.registry.dispatch(insert);
+		await settle();
+		expect(f.adapter.restoreSelection.mock.calls).toEqual([[3], [20]]);
+		expect(f.adapter.execute).toHaveBeenCalledTimes(2);
+		expect(signal.aborted).toBe(false);
+		expect(f.adapter.cancel).not.toHaveBeenCalled();
+	});
 
 });