fix(components/ag-grid): handle focus for adjacent lookup cells (#2929)

[AB#3151182](https://dev.azure.com/blackbaud/f565481a-7bc9-4083-95d5-4f953da6d499/_workitems/edit/3151182)
blackbaud · Dec 4, 2024 · fcb0d69 · fcb0d69
1 parent 6722996
commit fcb0d69
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 32 deletions.
diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.spec.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.spec.ts
@@ -24,7 +24,7 @@ import {
   ModuleRegistry,
   RowDataUpdatedEvent,
 } from 'ag-grid-community';
-import { BehaviorSubject, Subject, firstValueFrom } from 'rxjs';
+import { BehaviorSubject, EMPTY, Subject, firstValueFrom } from 'rxjs';
 
 import { SkyAgGridAdapterService } from './ag-grid-adapter.service';
 import { SkyAgGridWrapperComponent } from './ag-grid-wrapper.component';
@@ -867,8 +867,10 @@ describe('SkyAgGridWrapperComponent via fixture', () => {
         rowIndex: 0,
         colKey: 'lookupSingle',
       });
-      gridWrapperFixture.detectChanges();
-      await gridWrapperFixture.whenStable();
+      await firstValueFrom(
+        gridWrapperFixture.componentInstance.agGrid?.cellEditingStarted ??
+          EMPTY,
+      );
       expect(
         gridWrapperFixture.componentInstance.agGrid?.api.getEditingCells(),
       ).toHaveSize(1);
@@ -922,8 +924,10 @@ describe('SkyAgGridWrapperComponent via fixture', () => {
         rowIndex: 0,
         colKey: 'lookupMultiple',
       });
-      gridWrapperFixture.detectChanges();
-      await gridWrapperFixture.whenStable();
+      await firstValueFrom(
+        gridWrapperFixture.componentInstance.agGrid?.cellEditingStarted ??
+          EMPTY,
+      );
       expect(
         gridWrapperFixture.componentInstance.agGrid?.api.getEditingCells(),
       ).toHaveSize(1);

diff --git a/.../lib/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.component.spec.ts b/.../lib/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.component.spec.ts
@@ -384,7 +384,7 @@ describe('SkyAgGridCellEditorLookupComponent', () => {
 
   describe('afterGuiAttached', () => {
     describe('cellStartedEdit is true', () => {
-      it('does not select the input value if Backspace triggers the edit', () => {
+      it('does not select the input value if Backspace triggers the edit', fakeAsync(() => {
         component.agInit({
           ...(cellEditorParams as ICellEditorParams),
           eventKey: KeyCode.BACKSPACE,
@@ -397,12 +397,13 @@ describe('SkyAgGridCellEditorLookupComponent', () => {
         const selectSpy = spyOn(input, 'select');
 
         component.afterGuiAttached();
+        tick();
 
         expect(input.value).toBe('');
         expect(selectSpy).not.toHaveBeenCalled();
-      });
+      }));
 
-      it('does not select the input value if Delete triggers the edit', () => {
+      it('does not select the input value if Delete triggers the edit', fakeAsync(() => {
         component.agInit({
           ...(cellEditorParams as ICellEditorParams),
           eventKey: KeyCode.DELETE,
@@ -414,12 +415,13 @@ describe('SkyAgGridCellEditorLookupComponent', () => {
         const selectSpy = spyOn(input, 'select');
 
         component.afterGuiAttached();
+        tick();
 
         expect(input.value).toBe('');
         expect(selectSpy).not.toHaveBeenCalled();
-      });
+      }));
 
-      it('does not select the input value if F2 triggers the edit', () => {
+      it('does not select the input value if F2 triggers the edit', fakeAsync(() => {
         component.agInit({
           ...(cellEditorParams as ICellEditorParams),
           eventKey: KeyCode.F2,
@@ -431,12 +433,13 @@ describe('SkyAgGridCellEditorLookupComponent', () => {
         const selectSpy = spyOn(input, 'select');
 
         component.afterGuiAttached();
+        tick();
 
         expect(input.value).toBe(selection[0].name);
         expect(selectSpy).not.toHaveBeenCalled();
-      });
+      }));
 
-      it('selects the input value if Enter triggers the edit', () => {
+      it('selects the input value if Enter triggers the edit', fakeAsync(() => {
         component.agInit({
           ...(cellEditorParams as ICellEditorParams),
           eventKey: KeyCode.ENTER,
@@ -448,12 +451,13 @@ describe('SkyAgGridCellEditorLookupComponent', () => {
         const selectSpy = spyOn(input, 'select');
 
         component.afterGuiAttached();
+        tick();
 
         expect(input.value).toBe(selection[0].name);
         expect(selectSpy).toHaveBeenCalledTimes(1);
-      });
+      }));
 
-      it('does not select the input value when a standard keyboard event triggers the edit', () => {
+      it('does not select the input value when a standard keyboard event triggers the edit', fakeAsync(() => {
         component.agInit({
           ...(cellEditorParams as ICellEditorParams),
           eventKey: 'a',
@@ -465,11 +469,12 @@ describe('SkyAgGridCellEditorLookupComponent', () => {
         const selectSpy = spyOn(input, 'select').and.callThrough();
 
         component.afterGuiAttached();
+        tick();
         fixture.detectChanges();
 
         expect(input.value).toBe('a');
         expect(selectSpy).toHaveBeenCalledTimes(1);
-      });
+      }));
     });
 
     describe('cellStartedEdit is false', () => {

diff --git a/...d/src/lib/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.component.ts b/...d/src/lib/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.component.ts
@@ -112,7 +112,6 @@ export class SkyAgGridCellEditorLookupComponent
   public isCancelAfterEnd(): boolean {
     // Shut down components to commit values before final value syncs to grid.
     this.isAlive = false;
-    this.#changeDetector.detectChanges();
     return false;
   }
 
@@ -134,22 +133,25 @@ export class SkyAgGridCellEditorLookupComponent
   }
 
   public afterGuiAttached(): void {
-    const lookupInput: HTMLTextAreaElement =
-      this.#elementRef.nativeElement.querySelector('.sky-lookup-input');
-    lookupInput.focus();
-    if (this.#triggerType === SkyAgGridCellEditorInitialAction.Replace) {
-      lookupInput.select();
-      lookupInput.setRangeText(`${this.#params?.eventKey}`);
-      // Ensure the cursor is at the end of the text.
-      lookupInput.setSelectionRange(
-        lookupInput.value.length,
-        lookupInput.value.length,
-      );
-      lookupInput.dispatchEvent(new Event('input'));
-    }
-    if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
-      lookupInput.select();
-    }
+    // AG Grid sets focus to the cell via setTimeout, and this queues the input to focus after that.
+    setTimeout(() => {
+      const lookupInput: HTMLTextAreaElement =
+        this.#elementRef.nativeElement.querySelector('.sky-lookup-input');
+      lookupInput.focus();
+      if (this.#triggerType === SkyAgGridCellEditorInitialAction.Replace) {
+        lookupInput.select();
+        lookupInput.setRangeText(`${this.#params?.eventKey}`);
+        // Ensure the cursor is at the end of the text.
+        lookupInput.setSelectionRange(
+          lookupInput.value.length,
+          lookupInput.value.length,
+        );
+        lookupInput.dispatchEvent(new Event('input'));
+      }
+      if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
+        lookupInput.select();
+      }
+    });
   }
 
   public onLookupOpenChange(isOpen: boolean): void {