Avoid wrong interpretation of search bar by browser extension (e.g. 1…

…Password)

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

@@ -137,14 +137,17 @@ const onInputClicked = () => {
         </span>
         <input
             ref="searchInput"
-            type="text"
+            type="search"
             class="form-control text-truncate"
             :class="{
                 'rounded-bottom-0': showResults,
                 'rounded-start': isPhoneMode,
                 '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>