Fixed #1632 - Improve accessibility on Editable DataTable

src/components/datatable/BodyCell.vue

@@ -113,6 +113,11 @@ export default {
         if (this.columnProp('frozen')) {
             this.updateStickyPosition();
         }
+
+        if (this.d_editing && (this.editMode === 'cell' || (this.editMode === 'row' && this.columnProp('rowEditor')))) {
+            const focusableEl = DomHandler.getFirstFocusableElement(this.$el);
+            focusableEl && focusableEl.focus();
+        }
     },
     beforeUnmount() {
         if (this.overlayEventListener) {

src/components/utils/DomHandler.js

@@ -470,6 +470,11 @@ export default  {
         return visibleFocusableElements;
     },
 
+    getFirstFocusableElement(element) {
+        const focusableElements = this.getFocusableElements(element);
+        return focusableElements.length > 0 ? focusableElements[0] : null;
+    },
+
     isClickable(element) {
         const targetNode = element.nodeName;
         const parentNode = element.parentElement && element.parentElement.nodeName;

src/components/utils/Utils.d.ts

@@ -43,6 +43,7 @@ export declare class DomHandler {
     static isVisible(el: HTMLElement): boolean;
     static invokeElementMethod(el: HTMLElement, methodName: string, args: any): void;
     static getFocusableElements(el: HTMLElement): any[];
+    static getFirstFocusableElement(el: HTMLElement): any;
     static isClickable(el: HTMLElement): boolean;
     static applyStyle(el: HTMLElement, style: any): void;
     static isIOS(): boolean;