From 129d79bb389966dca61533246315da1f2bc4931e Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Thu, 2 Jul 2020 16:04:18 -0700
Subject: 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
---
 src/components/Global/Search.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index c385740b..e3703559 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 @@ export default {
 <style lang="scss" scoped>
 @import 'src/assets/styles/helpers';
 
-#searchInput {
+.search-input {
   padding-left: ($spacer * 2);
 }
 .search-icon {
-- 
cgit v1.2.3