From 82b94228f9a20014abcb9deb9675bb27e664133b Mon Sep 17 00:00:00 2001
From: Bob Maerten <bob.maerten@gmail.com>
Date: Wed, 22 Dec 2021 22:56:04 +0100
Subject: [PATCH] Enhance inputCloned text input with type and name (#908)

* Enhance inputCloned text input with type and name

Safari will display a contact autocomplete on every text input which `name` attribute contains "*name*" or does not have any `name` attribute.
Adding a fine tuned `name`attribute to the input should prevent that.

Plus, input type="search" seems more suited to the field intent (https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/search).

* Adapt inputCloned related test
---
 src/scripts/templates.test.ts | 3 ++-
 src/scripts/templates.ts      | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/scripts/templates.test.ts b/src/scripts/templates.test.ts
index 363cfa7..1c75ca7 100644
--- a/src/scripts/templates.test.ts
+++ b/src/scripts/templates.test.ts
@@ -494,7 +494,8 @@ describe('templates', () => {
       */
       const expectedOutput = strToEl(`
         <input
-          type="text"
+          type="search"
+          name="search_terms"
           class="${classes.input} ${classes.inputCloned}"
           autocomplete="off"
           role="textbox"
diff --git a/src/scripts/templates.ts b/src/scripts/templates.ts
index 4d4af87..15d2ce0 100644
--- a/src/scripts/templates.ts
+++ b/src/scripts/templates.ts
@@ -267,7 +267,8 @@ const templates = {
     placeholderValue: string,
   ): HTMLInputElement {
     const inp = Object.assign(document.createElement('input'), {
-      type: 'text',
+      type: 'search',
+      name: 'search_terms',
       className: `${input} ${inputCloned}`,
       autocomplete: 'off',
       autocapitalize: 'off',