Merge pull request #159 from JYChuah01/pcLookup-keydown-scroll-fix

Pclookup keyDown scroll navigation focus fix
pozil · Aug 12, 2024 · 7741ff8 · 7741ff8
2 parents fe0efcc + af7bf8a
commit 7741ff8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/main/default/lwc/lookup/__tests__/lookupEventHandling.test.js b/src/main/default/lwc/lookup/__tests__/lookupEventHandling.test.js
@@ -79,6 +79,7 @@ describe('c-lookup event handling', () => {
     });
 
     it('can select item with keyboard', async () => {
+        Element.prototype.scrollIntoView = jest.fn();
         jest.useFakeTimers();
 
         // Create lookup with search handler
@@ -99,6 +100,10 @@ describe('c-lookup event handling', () => {
         // Check selection
         expect(lookupEl.selection.length).toBe(1);
         expect(lookupEl.selection[0].id).toBe(SAMPLE_SEARCH_ITEMS[0].id);
+
+        // Check if the scroll focus is functional
+        const focusedElement = lookupEl.shadowRoot.querySelector(`[data-recordid="${SAMPLE_SEARCH_ITEMS[0].id}"]`);
+        expect(focusedElement.scrollIntoView).toHaveBeenCalled();
     });
 
     it('can create new record without pre-navigate callback', async () => {

diff --git a/src/main/default/lwc/lookup/lookup.js b/src/main/default/lwc/lookup/lookup.js
@@ -258,6 +258,15 @@ export default class Lookup extends NavigationMixin(LightningElement) {
             this.template.querySelector(`[data-recordid="${selectedId}"]`).click();
             event.preventDefault();
         }
+
+        if (event.keyCode === KEY_ARROW_DOWN || event.keyCode === KEY_ARROW_UP) {
+            const focusedElement = this.template.querySelector(
+                `[data-recordid="${this._searchResults[this._focusedResultIndex].id}"]`
+            );
+            if (focusedElement) {
+                focusedElement.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+        }
     }
 
     handleResultClick(event) {