Merge pull request #995 from geoadmin/bug-search-bar-role

Avoid wrong interpretation of search bar by browser extension (e.g. 1Password) - #patch

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>