From ac5596165a4fb2cc25a69b0ddcc6e1148b4faac4 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 28 Oct 2026 13:05:43 +0100
Subject: [PATCH] fix: show only the app's own message for a wrong address in
 the contact form, without the browser bubble over it

---
 .../contacts/__tests__/contact-form.test.tsx     | 16 ++++++++++++++++
 components/contacts/contact-form.tsx             |  4 +++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/contacts/__tests__/contact-form.test.tsx b/components/contacts/__tests__/contact-form.test.tsx
index e6c6570a0..ef207dbdc 100644
--- a/components/contacts/__tests__/contact-form.test.tsx
+++ b/components/contacts/__tests__/contact-form.test.tsx
@@ -50,6 +50,22 @@ describe('ContactForm', () => {
     expect(onSave).not.toHaveBeenCalled();
   });
 
+  // The browser's own "Please include an '@'" bubble sat over the app's
+  // inline message: the form leaves checking to the app.
+  it('says an address is wrong itself, with no browser bubble in the way', async () => {
+    const onSave = vi.fn();
+    render(<ContactForm contact={existingContact} onSave={onSave} onCancel={vi.fn()} />);
+    const form = screen.getByText('save').closest('form')!;
+    expect(form.noValidate).toBe(true);
+
+    fireEvent.change(screen.getByDisplayValue('alice@example.com'), { target: { value: 'alice@' } });
+    // A click on Save, as the user does: the browser checks a form that
+    // has no noValidate before it lets the submit through.
+    fireEvent.click(screen.getByRole('button', { name: 'save' }));
+    expect(await screen.findByText('email_invalid')).toBeInTheDocument();
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
   it('adds email entry when add button is clicked', () => {
     render(<ContactForm onSave={vi.fn()} onCancel={vi.fn()} />);
     const emailInputsBefore = screen.getAllByPlaceholderText('email_placeholder');
diff --git a/components/contacts/contact-form.tsx b/components/contacts/contact-form.tsx
index b2ebe7b04..ebfe802a0 100644
--- a/components/contacts/contact-form.tsx
+++ b/components/contacts/contact-form.tsx
@@ -693,7 +693,9 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
   const previewEmail = emails.find(e => e.address.trim())?.address.trim() || "";
 
   return (
-    <form onSubmit={handleSubmit} className="flex flex-col h-full bg-background">
+    // The app checks the fields itself and says what is wrong inline; the
+    // browser's own bubble covered that message.
+    <form onSubmit={handleSubmit} noValidate className="flex flex-col h-full bg-background">
       <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
         <h2 className="text-lg font-semibold">
           {isEditing ? t("edit_title") : t("create_title")}