fix(components/ag-grid): datepicker cell editor should handle refresh…

… refocus (#3056) (#3057) 🍒 Cherry picked from #3056 [fix(components/ag-grid): datepicker cell editor should handle refresh refocus](#3056) [AB#3232221](https://dev.azure.com/blackbaud/f565481a-7bc9-4083-95d5-4f953da6d499/_workitems/edit/3232221) Co-authored-by: John White <750350+johnhwhite@users.noreply.github.com>
blackbaud · Jan 27, 2025 · fa878fe · fa878fe
1 parent 86cd0af
commit fa878fe
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/...ules/ag-grid/cell-editors/cell-editor-datepicker/cell-editor-datepicker.component.spec.ts b/...ules/ag-grid/cell-editors/cell-editor-datepicker/cell-editor-datepicker.component.spec.ts
@@ -450,6 +450,7 @@ describe('SkyCellEditorDatepickerComponent', () => {
     ]);
     let cellEditorParams: Partial<SkyCellEditorDatepickerParams>;
     let column: AgColumn;
+    let gridCell: HTMLElement;
     const dateString = '01/01/2019';
     const date = new Date(dateString);
     const rowNode = new RowNode({} as BeanCollection);
@@ -464,6 +465,7 @@ describe('SkyCellEditorDatepickerComponent', () => {
         'col',
         true,
       );
+      gridCell = document.createElement('div');
 
       cellEditorParams = {
         api,
@@ -472,6 +474,7 @@ describe('SkyCellEditorDatepickerComponent', () => {
         node: rowNode,
         colDef: {},
         cellStartedEdit: true,
+        eGridCell: gridCell,
       };
     });
 
@@ -494,6 +497,24 @@ describe('SkyCellEditorDatepickerComponent', () => {
       expect(input.focus).toHaveBeenCalled();
     }));
 
+    it('should respond to reset focus', fakeAsync(() => {
+      datepickerEditorComponent.agInit(
+        cellEditorParams as SkyCellEditorDatepickerParams,
+      );
+      datepickerEditorFixture.detectChanges();
+      const input = datepickerEditorNativeElement.querySelector(
+        'input',
+      ) as HTMLInputElement;
+      spyOn(input, 'focus');
+      datepickerEditorComponent.onFocusOut({
+        relatedTarget: gridCell,
+      } as unknown as FocusEvent);
+      tick();
+
+      expect(input).toBeVisible();
+      expect(input.focus).toHaveBeenCalled();
+    }));
+
     describe('cellStartedEdit is true', () => {
       it('does not select the input value if Backspace triggers the edit', fakeAsync(() => {
         datepickerEditorComponent.agInit({

diff --git a/...b/modules/ag-grid/cell-editors/cell-editor-datepicker/cell-editor-datepicker.component.ts b/...b/modules/ag-grid/cell-editors/cell-editor-datepicker/cell-editor-datepicker.component.ts
@@ -65,7 +65,14 @@ export class SkyAgGridCellEditorDatepickerComponent
 
   @HostListener('focusout', ['$event'])
   public onFocusOut(event: FocusEvent): void {
-    if (event.target === this.datepickerInput?.nativeElement) {
+    if (
+      event.relatedTarget &&
+      event.relatedTarget === this.#params?.eGridCell
+    ) {
+      // If focus is being set to the grid cell, schedule focus on the datepicker input.
+      // This happens when the refreshCells API is called.
+      this.afterGuiAttached();
+    } else if (event.target === this.datepickerInput?.nativeElement) {
       this.#stopEditingOnBlur();
     }
   }