feat: escape key clears search

pozil · Sep 8, 2024 · 47472ea · 47472ea
1 parent 1afb4c5
commit 47472ea
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 5 deletions.
diff --git a/src/main/default/lwc/lookup/__tests__/lookupEventHandling.test.js b/src/main/default/lwc/lookup/__tests__/lookupEventHandling.test.js
@@ -2,8 +2,9 @@ const { createLookupElement, inputSearchTerm, flushPromises, SAMPLE_SEARCH_ITEMS
 import { getNavigateCalledWith } from 'lightning/navigation';
 
 const SAMPLE_SEARCH = 'sample';
-const ARROW_DOWN = 40;
-const ENTER = 13;
+const KEY_ESCAPE = 27;
+const KEY_ARROW_DOWN = 40;
+const KEY_ENTER = 13;
 
 describe('c-lookup event handling', () => {
     afterEach(() => {
@@ -94,8 +95,8 @@ describe('c-lookup event handling', () => {
 
         // Simulate keyboard navigation
         const searchInput = lookupEl.shadowRoot.querySelector('input');
-        searchInput.dispatchEvent(new KeyboardEvent('keydown', { keyCode: ARROW_DOWN }));
-        searchInput.dispatchEvent(new KeyboardEvent('keydown', { keyCode: ENTER }));
+        searchInput.dispatchEvent(new KeyboardEvent('keydown', { keyCode: KEY_ARROW_DOWN }));
+        searchInput.dispatchEvent(new KeyboardEvent('keydown', { keyCode: KEY_ENTER }));
 
         // Check selection
         expect(lookupEl.selection.length).toBe(1);
@@ -106,6 +107,29 @@ describe('c-lookup event handling', () => {
         expect(focusedElement.scrollIntoView).toHaveBeenCalled();
     });
 
+    it('can clearn search results with keyboard', async () => {
+        jest.useFakeTimers();
+
+        // Create lookup with search handler
+        const lookupEl = createLookupElement();
+        const searchFn = (event) => {
+            event.target.setSearchResults(SAMPLE_SEARCH_ITEMS);
+        };
+        lookupEl.addEventListener('search', searchFn);
+
+        // Set search term and force input change
+        await inputSearchTerm(lookupEl, SAMPLE_SEARCH);
+
+        // Simulate keyboard 'escape' key press
+        const searchInput = lookupEl.shadowRoot.querySelector('input');
+        searchInput.dispatchEvent(new KeyboardEvent('keydown', { keyCode: KEY_ESCAPE }));
+        await flushPromises();
+
+        // Check that there are no search results displayed
+        const seachResultElements = lookupEl.shadowRoot.querySelectorAll(`[data-recordid]`);
+        expect(seachResultElements.length).toBe(0);
+    });
+
     it('can create new record without pre-navigate callback', async () => {
         jest.useFakeTimers();
 

diff --git a/src/main/default/lwc/lookup/lookup.js b/src/main/default/lwc/lookup/lookup.js
@@ -3,6 +3,7 @@ import { NavigationMixin } from 'lightning/navigation';
 
 const SEARCH_DELAY = 300; // Wait 300 ms after user stops typing then, perform search
 
+const KEY_ESCAPE = 27;
 const KEY_ARROW_UP = 38;
 const KEY_ARROW_DOWN = 40;
 const KEY_ENTER = 13;
@@ -237,7 +238,20 @@ export default class Lookup extends NavigationMixin(LightningElement) {
         if (this._focusedResultIndex === null) {
             this._focusedResultIndex = -1;
         }
-        if (event.keyCode === KEY_ARROW_DOWN) {
+        if (event.keyCode === KEY_ESCAPE) {
+            // Reset search
+            this._cleanSearchTerm = '';
+            this._searchTerm = '';
+            this.setSearchResults([]);
+            // Indicate that component was interacted with
+            this._isDirty = true;
+            // Blur input after single select lookup selection
+            if (!this.isMultiEntry && this.hasSelection()) {
+                this._hasFocus = false;
+            }
+            // Notify parent components that selection was cleared
+            this.dispatchEvent(new CustomEvent('selectionchange', { detail: null }));
+        } else if (event.keyCode === KEY_ARROW_DOWN) {
             // If we hit 'down', select the next item, or cycle over.
             this._focusedResultIndex++;
             if (this._focusedResultIndex >= this._searchResults.length) {