From 820af83c8a4060f8acefb56890bd8f7e6fee4ab4 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 8 Jul 2024 06:47:51 +0200
Subject: [PATCH] Avoid wrong interpretation of search bar by browser extension
 (e.g. 1Password)

Some browser extension like 1Password could interpret the search bar as an
normal input field and provided an auto fill. For user with 1Password this was
very annoying as you certainly never wants to have a search input field automatically
filled with user credentials or user personal infos.

To avoid this use the standard search input type and also added some standard
attribute to improve user experience.
---
 src/modules/menu/components/search/SearchBar.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/modules/menu/components/search/SearchBar.vue b/src/modules/menu/components/search/SearchBar.vue
index 068dde846..a907f2898 100644
--- a/src/modules/menu/components/search/SearchBar.vue
+++ b/src/modules/menu/components/search/SearchBar.vue
@@ -137,7 +137,7 @@ const onInputClicked = () => {
         </span>
         <input
             ref="searchInput"
-            type="text"
+            type="search"
             class="form-control text-truncate"
             :class="{
                 'rounded-bottom-0': showResults,
@@ -145,6 +145,9 @@ const onInputClicked = () => {
                 'rounded-end': !searchValue,
             }"
             :placeholder="$t('search_placeholder')"
+            autocapitalize="off"
+            autocorrect="off"
+            spellcheck="false"
             aria-label="Search"
             aria-describedby="searchIconText clearSearchButton"
             :value="searchValue"
@@ -190,4 +193,11 @@ const onInputClicked = () => {
 
 <style lang="scss" scoped>
 @import '@/scss/media-query.mixin';
+
+// Prevent clear icon of search input on certain browser like chrome, the clear icon is added
+// manually using bootstrap see template above.
+input[type='search']::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+}
 </style>