@remit/ui 0.0.135 → 0.0.137

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.135",
+  "version": "0.0.137",
   "type": "module",
   "files": [
     "src"

package/src/components/compose-address-field.tsx

@@ -140,7 +140,7 @@ export const ComposeAddressField = ({
 	}, [commitInput, suggest.dismiss]);
 
 	return (
-		<div className="relative">
+		<div className="relative" data-address-field={label}>
 			<div className="flex items-start gap-2">
 				<label
 					htmlFor={`address-field-${label}`}

package/src/components/editor-focus.test.ts

@@ -0,0 +1,88 @@
+/**
+ * `isWritingElsewhere` against a real focused element (#839) — mounted on jsdom
+ * rather than a stub, so the `type` fallback is the platform's own and not one
+ * the test agrees with.
+ */
+import "@remit/test-dom";
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { isWritingElsewhere } from "./editor-focus.js";
+
+const editor = document.createElement("div");
+
+const focusInput = (type: string | null): void => {
+	const input = document.createElement("input");
+	if (type !== null) input.setAttribute("type", type);
+	document.body.append(input);
+	input.focus();
+};
+
+afterEach(() => {
+	document.body.replaceChildren();
+});
+
+describe("isWritingElsewhere", () => {
+	it("reads an input the platform renders as text as writing", () => {
+		for (const type of [
+			"text",
+			"search",
+			"email",
+			"url",
+			"tel",
+			"password",
+			"number",
+			"date",
+			"datetime-local",
+			"month",
+			"time",
+			"week",
+		]) {
+			document.body.replaceChildren();
+			focusInput(type);
+			assert.equal(isWritingElsewhere(editor), true, type);
+		}
+	});
+
+	it("reads an empty type as writing", () => {
+		// HTML falls back to a text field, so the reader may be mid-sentence in it.
+		focusInput("");
+		assert.equal(isWritingElsewhere(editor), true);
+	});
+
+	it("reads an unrecognised type as writing", () => {
+		focusInput("wibble");
+		assert.equal(isWritingElsewhere(editor), true);
+	});
+
+	it("reads a missing type as writing", () => {
+		focusInput(null);
+		assert.equal(isWritingElsewhere(editor), true);
+	});
+
+	it("leaves the controls alone", () => {
+		for (const type of [
+			"button",
+			"checkbox",
+			"color",
+			"file",
+			"image",
+			"radio",
+			"range",
+			"reset",
+			"submit",
+		]) {
+			document.body.replaceChildren();
+			focusInput(type);
+			assert.equal(isWritingElsewhere(editor), false, type);
+		}
+	});
+
+	it("ignores the case the type is written in", () => {
+		focusInput("CheckBox");
+		assert.equal(isWritingElsewhere(editor), false);
+	});
+
+	it("is not writing elsewhere when nothing holds the caret", () => {
+		assert.equal(isWritingElsewhere(editor), false);
+	});
+});

package/src/components/editor-focus.ts

@@ -13,23 +13,26 @@
  */
 
 /**
- * The types an `<input>` accepts prose in. Everything else it can be — a
- * checkbox, a radio, a button, a file or colour picker — is a control the
- * reader clicks, not one they are mid-word in.
+ * The types an `<input>` is a control rather than a writing surface in — a
+ * checkbox, a radio, a button, a file or colour picker, something the reader
+ * clicks and is never mid-word in.
+ *
+ * Named the other way round on purpose. An `<input>` with an empty or
+ * unrecognised `type` renders as a text field, so listing the ones that accept
+ * prose would read every new or misspelt type as a control and take the caret
+ * out of a field the reader is typing in.
  */
-const TEXT_INPUT_TYPES = new Set([
-	"text",
-	"search",
-	"email",
-	"url",
-	"tel",
-	"password",
-	"number",
-	"date",
-	"datetime-local",
-	"month",
-	"time",
-	"week",
+const NON_TEXT_INPUT_TYPES = new Set([
+	"button",
+	"checkbox",
+	"color",
+	"file",
+	"hidden",
+	"image",
+	"radio",
+	"range",
+	"reset",
+	"submit",
 ]);
 
 /**
@@ -59,7 +62,7 @@ const takesTyping = (element: Element): boolean => {
 	if (tag === "SELECT") return true;
 	if (tag === "INPUT") {
 		const type = (element.getAttribute("type") ?? "text").toLowerCase();
-		return TEXT_INPUT_TYPES.has(type);
+		return !NON_TEXT_INPUT_TYPES.has(type);
 	}
 	// The attribute as well as the property: `isContentEditable` is computed by
 	// the engine, and a document that never lays out does not answer for it.