[pull] latest from ag-grid:latest

packages/ag-grid-community/src/focusService.ts

@@ -171,20 +171,28 @@ export class FocusService extends BeanStub implements NamedBean {
     public doesRowOrCellHaveBrowserFocus() {
         const activeElement = _getActiveDomElement(this.beans);
         // check for cell first
-        if (this.isDomDataPresentInHierarchy(activeElement, DOM_DATA_KEY_CELL_CTRL)) {
+        if (this.isDomDataPresentInHierarchy(activeElement, DOM_DATA_KEY_CELL_CTRL, true)) {
             return true;
         }
         // otherwise rows
-        return this.isDomDataPresentInHierarchy(activeElement, DOM_DATA_KEY_ROW_CTRL);
+        return this.isDomDataPresentInHierarchy(activeElement, DOM_DATA_KEY_ROW_CTRL, true);
     }
 
-    private isDomDataPresentInHierarchy(eBrowserCell: Node | null, key: string): boolean {
+    private isDomDataPresentInHierarchy(
+        eBrowserCell: Node | null,
+        key: string,
+        attemptToRefocusIfDestroyed?: boolean
+    ): boolean {
         let ePointer = eBrowserCell;
 
         while (ePointer) {
             const data = _getDomData(this.gos, ePointer, key);
 
             if (data) {
+                if (data.destroyed && attemptToRefocusIfDestroyed) {
+                    this.attemptToRecoverFocus();
+                    return false;
+                }
                 return true;
             }
 
@@ -597,13 +605,6 @@ export class FocusService extends BeanStub implements NamedBean {
 
             this.beans.rangeSvc?.setRangeToCell({ rowIndex, rowPinned, column });
 
-            // When focus is requested from outside the grid (e.g. tabbing into the grid),
-            // the target cell may not yet be rendered (SSRM loading). Mark focus for recovery
-            // so it is restored when the cell appears.
-            if (!this.doesRowOrCellHaveBrowserFocus()) {
-                this.attemptToRecoverFocus();
-            }
-
             return true;
         }
 

packages/ag-grid-community/src/rendering/cell/cellCtrl.ts

@@ -854,7 +854,7 @@ export class CellCtrl extends BeanStub {
         return isFocused;
     }
 
-    public setupFocus() {
+    private setupFocus() {
         // when cell is created, if it should be focus the grid should take focus from the focused cell
         this.restoreFocus(true);
         this.onCellFocused(this.focusEventWhileNotReady ?? undefined);
@@ -881,7 +881,10 @@ export class CellCtrl extends BeanStub {
         this.comp.toggleCss(CSS_CELL_FOCUS, cellFocused);
 
         // see if we need to force browser focus - this can happen if focus is programmatically set
-        if (cellFocused && event?.forceBrowserFocus) {
+        if (
+            cellFocused &&
+            (event?.forceBrowserFocus || (!this.hasBrowserFocus() && this.beans.focusSvc.shouldTakeFocus()))
+        ) {
             let focusEl = this.comp.getFocusableElement();
 
             if (editing) {
@@ -891,10 +894,15 @@ export class CellCtrl extends BeanStub {
                 }
             }
 
-            focusEl.focus({ preventScroll: !!event.preventScrollOnBrowserFocus });
+            const preventScroll = event ? event.preventScrollOnBrowserFocus : true;
+            focusEl.focus({ preventScroll });
             _placeCaretAtEnd(beans, focusEl);
         }
 
+        if (cellFocused && this.focusEventWhileNotReady) {
+            this.focusEventWhileNotReady = null;
+        }
+
         // require event to announce so we only announce
         // a direct user interaction with the cell
         if (cellFocused && event) {

packages/ag-grid-community/src/rendering/row/rowCtrl.ts

@@ -110,6 +110,7 @@ export class RowCtrl extends BeanStub<RowCtrlEvent> {
     private centerGui: RowGui | undefined;
     private rightGui: RowGui | undefined;
     private fullWidthGui: RowGui | undefined;
+    private focusEventWhileNotReady: CellFocusedEvent | null = null;
 
     private allRowGuis: RowGui[] = [];
 
@@ -218,7 +219,7 @@ export class RowCtrl extends BeanStub<RowCtrlEvent> {
         containerType: RowContainerType,
         compBean: BeanStub<any> | undefined
     ): void {
-        const { context, focusSvc } = this.beans;
+        const { context, rowRenderer } = this.beans;
         compBean = setupCompBean(this, context, compBean);
 
         const gui: RowGui = { rowComp, element, containerType, compBean };
@@ -235,17 +236,10 @@ export class RowCtrl extends BeanStub<RowCtrlEvent> {
             // this is fired within setComp as we know that the component renderer is now trying to render.
             // linked with the fact the function implementation queues behind requestAnimationFrame should allow
             // us to be certain that all rendering is done by the time the event fires.
-            this.beans.rowRenderer.dispatchFirstDataRenderedEvent();
+            rowRenderer.dispatchFirstDataRenderedEvent();
         }
 
-        const focusableElement = this.fullWidthGui?.element;
-        if (focusableElement) {
-            // when cell is created, if it should be focus the grid should take focus from the focused cell
-            const editing = this.beans.editSvc?.isEditing(this);
-            if (!editing && focusSvc.isRowFocused(rowNode.rowIndex!, rowNode.rowPinned) && focusSvc.shouldTakeFocus()) {
-                setTimeout(() => focusableElement.focus({ preventScroll: true }), 0);
-            }
-        }
+        this.setupFocus();
     }
 
     public unsetComp(containerType: RowContainerType): void {
@@ -1073,37 +1067,99 @@ export class RowCtrl extends BeanStub<RowCtrlEvent> {
         }
     }
 
-    public onFullWidthRowFocused(event?: CellFocusedEvent) {
-        const node = this.rowNode;
-        const isFocused = !event
-            ? false
-            : this.isFullWidth() && event.rowIndex === node.rowIndex && event.rowPinned == node.rowPinned;
+    private setupFocus(): void {
+        if (!this.isFullWidth()) {
+            return;
+        }
 
-        let element: HTMLElement | undefined;
+        this.restoreFullWidthFocus(true);
+        this.onFullWidthRowFocused(this.focusEventWhileNotReady ?? undefined);
+    }
 
-        if (this.fullWidthGui) {
-            element = this.fullWidthGui.element;
-        } else {
-            const column = this.beans.colModel.getCol(event?.column);
-            const pinned = column?.pinned;
+    private restoreFullWidthFocus(waitForRender = false): void {
+        const { focusSvc, editSvc } = this.beans;
+        if (editSvc?.isEditing(this)) {
+            return;
+        }
 
-            if (pinned) {
-                element = pinned === 'right' ? this.rightGui?.element : this.leftGui?.element;
-            } else {
-                element = this.centerGui?.element;
+        if (!focusSvc.isRowFocused(this.rowNode.rowIndex!, this.rowNode.rowPinned) || !focusSvc.shouldTakeFocus()) {
+            return;
+        }
+
+        const targetGui = this.getFullWidthRowGuiForFocus();
+        if (!targetGui) {
+            return;
+        }
+
+        const focus = () => {
+            if (!this.isAlive()) {
+                return;
+            }
+            if (focusSvc.isRowFocused(this.rowNode.rowIndex!, this.rowNode.rowPinned)) {
+                targetGui.element.focus({ preventScroll: true });
             }
+        };
+
+        if (waitForRender) {
+            setTimeout(focus, 0);
+            return;
         }
 
-        if (!element) {
+        focus();
+    }
+
+    private getFullWidthRowGuiForFocus(event?: CellFocusedEvent): RowGui | undefined {
+        if (this.fullWidthGui) {
+            return this.fullWidthGui;
+        }
+
+        const focusedCell = this.beans.focusSvc.getFocusedCell();
+        const column = this.beans.colModel.getCol(event?.column ?? focusedCell?.column);
+        if (!column) {
             return;
-        } // can happen with react ui, comp not yet ready
+        }
+        const pinned = column?.pinned;
+
+        if (pinned === 'right') {
+            return this.rightGui;
+        }
+        if (pinned === 'left') {
+            return this.leftGui;
+        }
+        return this.centerGui;
+    }
+
+    private setFullWidthRowFocusedClass(targetGui: RowGui | undefined, isFocused: boolean): void {
+        this.forEachGui(undefined, (gui) => {
+            gui.element.classList.toggle('ag-full-width-focus', isFocused && gui === targetGui);
+        });
+    }
+
+    public onFullWidthRowFocused(event?: CellFocusedEvent) {
+        const { focusSvc } = this.beans;
+        const isFocused = this.isFullWidth() && focusSvc.isRowFocused(this.rowNode.rowIndex!, this.rowNode.rowPinned);
+
+        if (!isFocused) {
+            this.setFullWidthRowFocusedClass(undefined, false);
+            return;
+        }
+
+        const targetGui = this.getFullWidthRowGuiForFocus(event);
+        if (!targetGui) {
+            if (event) {
+                this.focusEventWhileNotReady = event;
+            }
+            this.setFullWidthRowFocusedClass(undefined, false);
+            return;
+        }
 
-        element.classList.toggle('ag-full-width-focus', isFocused);
+        this.setFullWidthRowFocusedClass(targetGui, true);
+        this.focusEventWhileNotReady = null;
 
-        if (isFocused && event?.forceBrowserFocus) {
+        if (event?.forceBrowserFocus) {
             // we don't scroll normal rows into view when we focus them, so we don't want
             // to scroll Full Width rows either.
-            element.focus({ preventScroll: true });
+            targetGui.element.focus({ preventScroll: true });
         }
     }