Fixed #2813 - Add tabindex property to VirtualScroller

api-generator/components/virtualscroller.js

@@ -94,6 +94,12 @@ const VirtualScrollerProps = [
         type: "boolean",
         default: "false",
         description: "Whether to show loader."
+    },
+    {
+        name: "tabindex",
+        type: "number|string",
+        default: "0",
+        description: "Index of the element in tabbing order."
     }
 ];
 

src/components/virtualscroller/VirtualScroller.d.ts

@@ -158,6 +158,11 @@ export interface VirtualScrollerProps {
      * @param {VirtualScrollerLazyEvent} event - Custom lazy event.
      */
     onLazyLoad?: (event: VirtualScrollerLazyEvent) => void;
+    /**
+     * Index of the element in tabbing order.
+     * Default value is 0.
+     */
+    tabindex?: number | string | undefined;
 }
 
 export interface VirtualScrollerSlots {

src/components/virtualscroller/VirtualScroller.vue

@@ -1,6 +1,6 @@
 <template>
     <template v-if="!disabled">
-        <div :ref="elementRef" :class="containerClass" :tabindex="0" :style="style" @scroll="onScroll">
+        <div :ref="elementRef" :class="containerClass" :tabindex="tabindex" :style="style" @scroll="onScroll">
             <slot name="content" :styleClass="contentClass" :items="loadedItems" :getItemOptions="getOptions" :loading="d_loading" :getLoaderOptions="getLoaderOptions" :itemSize="itemSize"
                 :rows="loadedRows" :columns="loadedColumns" :contentRef="contentRef" :spacerStyle="spacerStyle" :contentStyle="contentStyle"
                 :vertical="isVertical()" :horizontal="isHorizontal()" :both="isBoth()">
@@ -87,6 +87,10 @@ export default {
         showLoader: {
             type: Boolean,
             default: false
+        },
+        tabindex: {
+            type: Number,
+            default: 0
         }
     },
     data() {

src/views/virtualscroller/VirtualScrollerDoc.vue

@@ -220,6 +220,12 @@ export default {
                         <td>false</td>
                         <td>Whether to show loader.</td>
                     </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>