From 274949146775ba8202a533ca35f3ac02ee63f432 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 21 Apr 2022 15:50:07 +0200
Subject: [PATCH] Fix invalid HTML (<div> inside <label>)

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/SearchField.vue | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/js/src/components/SearchField.vue b/js/src/components/SearchField.vue
index c81650761..b6376f748 100644
--- a/js/src/components/SearchField.vue
+++ b/js/src/components/SearchField.vue
@@ -1,18 +1,22 @@
 <template>
-  <label for="navSearchField">
-    <span class="visually-hidden">{{ defaultPlaceHolder }}</span>
+  <b-field label-for="navSearchField" class="-mt-2">
     <b-input
-      custom-class="searchField"
+      :placeholder="defaultPlaceHolder"
+      type="search"
       id="navSearchField"
       icon="magnify"
-      type="search"
+      icon-clickable
       rounded
+      custom-class="searchField"
       dir="auto"
-      :placeholder="defaultPlaceHolder"
       v-model="search"
       @keyup.native.enter="enter"
-    />
-  </label>
+    >
+    </b-input>
+    <template #label>
+      <span class="sr-only">{{ defaultPlaceHolder }}</span>
+    </template>
+  </b-field>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
@@ -47,6 +51,7 @@ label span.visually-hidden {
 input.searchField {
   box-shadow: none;
   border-color: #b5b5b5;
+  border-radius: 9999px !important;
 
   &::placeholder {
     color: gray;