fixes #795

xaksis · Jan 17, 2021 · a246512 · a246512
1 parent fa7d90e
commit a246512
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 14 deletions.
diff --git a/dev/grouped-table.vue b/dev/grouped-table.vue
@@ -15,7 +15,7 @@
     @on-row-mouseenter="onMouseover"
     @on-row-mouseleave="onMouseover"
     :search-options="{
-      enabled: false,
+      enabled: true,
     }"
     :pagination-options="{
       enabled: true,

diff --git a/src/components/VgtGlobalSearch.vue b/src/components/VgtGlobalSearch.vue
@@ -2,14 +2,14 @@
 <div v-if="showControlBar" class="vgt-global-search vgt-clearfix">
   <div class="vgt-global-search__input vgt-pull-left">
     <form @submit.prevent v-if="searchEnabled" role="search">
-      <label for="vgt-search">
+      <label :for="id">
         <span aria-hidden="true" class="input__icon">
         <div class="magnifying-glass"></div>
         </span>
         <span class="sr-only">Search</span>
       </label>
     <input
-      id="vgt-search"
+      :id="id"
       type="text"
       class="vgt-input vgt-pull-left"
       :placeholder="null"
@@ -37,6 +37,7 @@ export default {
   data() {
     return {
       globalSearchTerm: null,
+      id: this.getId(),
     };
   },
   computed: {
@@ -54,6 +55,9 @@ export default {
     entered(value) {
       this.$emit('on-enter', value);
     },
+    getId() {
+      return `vgt-search-${Math.floor(Math.random() * Date.now())}`;
+    },
   },
 };
 </script>

diff --git a/src/components/VgtPagination.vue b/src/components/VgtPagination.vue
@@ -2,9 +2,9 @@
   <div class="vgt-wrap__footer vgt-clearfix">
     <div class="footer__row-count vgt-pull-left">
       <form>
-        <label for="select-rows-per-page" class="footer__row-count__label">{{rowsPerPageText}}:</label>
+        <label :for="id" class="footer__row-count__label">{{rowsPerPageText}}:</label>
         <select
-          id="select-rows-per-page"
+          :id="id"
           autocomplete="off"
           name="perPageSelect"
           class="footer__row-count__select"
@@ -83,13 +83,15 @@ export default {
     allText: { default: 'All' },
   },
 
-  data: () => ({
-    currentPage: 1,
-    prevPage: 0,
-    currentPerPage: 10,
-    rowsPerPageOptions: [],
-  }),
-
+  data() {
+    return {
+      id: this.getId(),
+      currentPage: 1,
+      prevPage: 0,
+      currentPerPage: 10,
+      rowsPerPageOptions: [],
+    };
+  },
   watch: {
     perPage: {
       handler(newValue, oldValue) {
@@ -145,6 +147,9 @@ export default {
   },
 
   methods: {
+    getId() {
+      return `vgt-select-rpp-${Math.floor(Math.random() * Date.now())}`;
+    },
     // Change current page
     changePage(pageNumber, emit = true) {
       if (pageNumber > 0 && this.total > this.currentPerPage * (pageNumber - 1)) {

diff --git a/src/components/VgtPaginationPageInfo.vue b/src/components/VgtPaginationPageInfo.vue
@@ -1,10 +1,10 @@
 <template>
 <div class="footer__navigation__page-info">
   <form @submit.prevent>
-    <label for="change-page-input" class="page-info__label">
+    <label :for="id" class="page-info__label">
       <span>{{pageText}}</span>
       <input
-        id="change-page-input"
+        :id="id"
         aria-describedby="change-page-hint"
         aria-controls="vgb-table"
         class="footer__navigation__page-info__current-entry"
@@ -44,6 +44,7 @@ export default {
   },
   data() {
     return {
+      id: this.getId(),
     };
   },
   computed: {
@@ -52,6 +53,9 @@ export default {
     },
   },
   methods: {
+    getId() {
+      return `vgt-page-input-${Math.floor(Math.random() * Date.now())}`;
+    },
     changePage(event) {
       const value = parseInt(event.target.value, 10);