Fix invalid HTML (<div> inside <label>)

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-04-21 15:50:07 +02:00
parent f23f438763
commit 2749491467
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773

View file

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