lukas/webmail-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compose: typed text became a recipient without being an address

Browse Source 
Blurring the To/Cc/Bcc field (or Enter, or a comma) committed whatever was
typed — a name like "John" became a recipient that could never be
delivered. Only valid addresses ("a@x.com" or "Name <a@x.com>") now become
chips; anything else stays in the input, marked red, to fix or complete
from the suggestions. A pasted list keeps just its invalid parts.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
lukas
2026-09-28 08:09:09 +02:00
co-authored by Claude Opus 5.5
parent caed8543ea
commit fbca6cb728
2 changed files with 124 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/compose/RecipientChips.tsx
+38 -7
View File
@@ -17,6 +17,13 @@ function parseAddr(token: string): { name: string; email: string } {
return { name: "", email: token };
}
// Something that can actually be sent to: a bare address or "Name <address>",
// with a dotted domain. A typed name alone ("John") is not one.
const EMAIL = /^[^\s@<>,;]+@[^\s@<>,;]+\.[^\s@<>,;]+$/;
export function isValidRecipient(token: string): boolean {
return EMAIL.test(parseAddr(token.trim()).email.trim());
}
// A recipient field rendering committed addresses as removable chips with an
// inline autocomplete input (Fastmail-style). The value stays a comma-joined
// string ("Name <email>" or bare email) so the draft payload is unchanged.
@@ -38,16 +45,34 @@ export function RecipientChips({
const [draft, setDraft] = useState("");
const [suggestions, setSuggestions] = useState<RecipientSuggestion[]>([]);
const [open, setOpen] = useState(false);
// Typed text that is not an address, left in the input (red) rather than
// turned into a recipient that could never be delivered.
const [invalid, setInvalid] = useState(false);
const boxRef = useRef<HTMLDivElement>(null);
const commit = (token: string) => {
const tok = token.trim().replace(/,+$/, "").trim();
if (!tok) return;
onChange([...chips, tok].join(", "));
// A chosen suggestion is an address by construction.
const pick = (token: string) => {
onChange([...chips, token].join(", "));
setDraft("");
setInvalid(false);
setOpen(false);
setSuggestions([]);
};
// Typed text becomes chips only where it is a valid address; a paste of
// several ("a@x.com, John") keeps the rest in the input to fix or complete.
const commit = (text: string) => {
const tokens = splitList(text);
const good = tokens.filter(isValidRecipient);
const bad = tokens.filter((tok) => !isValidRecipient(tok));
if (good.length) onChange([...chips, ...good].join(", "));
setDraft(bad.join(", "));
setInvalid(bad.length > 0);
if (!bad.length) {
setOpen(false);
setSuggestions([]);
}
};
const removeAt = (i: number) => onChange(chips.filter((_, idx) => idx !== i).join(", "));
useEffect(() => {
@@ -106,12 +131,18 @@ export function RecipientChips({
);
})}
<input
className="min-w-[8rem] flex-1 bg-transparent py-1 text-sm text-app-fg outline-none placeholder:text-app-faint"
className={`min-w-[8rem] flex-1 bg-transparent py-1 text-sm outline-none placeholder:text-app-faint ${
invalid ? "text-red-500" : "text-app-fg"
}`}
aria-invalid={invalid}
value={draft}
placeholder={chips.length === 0 ? t("compose.addRecipient") : ""}
autoFocus={autoFocus}
autoComplete="off"
onChange={(e) => setDraft(e.target.value)}
onChange={(e) => {
setDraft(e.target.value);
setInvalid(false);
}}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === ",") {
e.preventDefault();
@@ -134,7 +165,7 @@ export function RecipientChips({
className="flex w-full flex-col px-3 py-1.5 text-left hover:bg-app-hover"
onMouseDown={(e) => {
e.preventDefault();
commit(s.name ? `${s.name} <${s.email}>` : s.email);
pick(s.name ? `${s.name} <${s.email}>` : s.email);
}}
>
{s.name && <span className="text-sm text-app-fg">{s.name}</span>}