Fix browser warning of non-unique id on Hardware page
Adds a unique id to the global search component.
The search component has an id attribute. When it is reused on
the same page, like Hardware status, the id is no longer unique
within the document.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I1226aa9da69b90b9a7da9ed3d053fde020babcc0
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index c385740..e370355 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -2,7 +2,7 @@
<div class="search-global">
<b-form-group
:label="$t('global.form.search')"
- label-for="searchInput"
+ :label-for="`searchInput-${_uid}`"
label-sr-only
class="mb-2"
>
@@ -11,8 +11,9 @@
<icon-search class="search-icon" />
</b-input-group-prepend>
<b-form-input
- id="searchInput"
+ :id="`searchInput-${_uid}`"
v-model="filter"
+ class="search-input"
type="text"
:placeholder="placeholder"
@input="onChangeInput"
@@ -51,7 +52,7 @@
<style lang="scss" scoped>
@import 'src/assets/styles/helpers';
-#searchInput {
+.search-input {
padding-left: ($spacer * 2);
}
.search-icon {