feat: focus function

Author: pozil

README.md

@@ -277,6 +277,7 @@ Sometimes, you may want to pass extra data from the lookup component to Apex. To
 
 | Function                     | Description                                                                                                                                    |
 | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `focus()`                    | Places focus on the component an opens the search dropdown (unless this is a single selection lookup with a selection).                        |
 | `blur()`                     | Removes focus from the component and closes the search results list.                                                                           |
 | `getSelection()`             | Gets the current lookup selection as an array of `LookupSearchResult`.                                                                         |
 | `setDefaultResults(results)` | Allows to set optional default items returned when search has no result (ex: recent items).<br/>`results` is an array of `LookupSearchResult`. |

src-sample/main/default/lwc/sampleLookupContainer/sampleLookupContainer.html

@@ -40,6 +40,7 @@
             </c-lookup>
 
             <div class="slds-var-m-top_large">
+                <lightning-button label="Focus" onclick={handleFocus}></lightning-button>&nbsp;
                 <lightning-button label="Clear" onclick={handleClear}></lightning-button>&nbsp;
                 <lightning-button variant="brand" label="Submit" onclick={handleSubmit}></lightning-button>
             </div>

src-sample/main/default/lwc/sampleLookupContainer/sampleLookupContainer.js

@@ -107,6 +107,10 @@ export default class SampleLookupContainer extends LightningElement {
         this.errors = [];
     }
 
+    handleFocus() {
+        this.template.querySelector('c-lookup').focus();
+    }
+
     checkForErrors() {
         this.errors = [];
         const selection = this.template.querySelector('c-lookup').getSelection();

src/main/default/lwc/lookup/__tests__/lookupExposedFunctions.test.js

@@ -61,6 +61,15 @@ describe('c-lookup exposed functions', () => {
         expect(listItemEls.length).toBe(SAMPLE_SEARCH_ITEMS.length);
     });
 
+    it('focuses', async () => {
+        // Create lookup
+        const lookupEl = createLookupElement();
+        lookupEl.focus();
+
+        // Verify focus
+        expect(document.activeElement).toEqual(lookupEl);
+    });
+
     it('blurs removes focus and closes dropdown', async () => {
         jest.useFakeTimers();
 

src/main/default/lwc/lookup/lookup.js

@@ -144,6 +144,11 @@ export default class Lookup extends NavigationMixin(LightningElement) {
         }
     }
 
+    @api
+    focus() {
+        this.template.querySelector('input')?.focus();
+    }
+
     @api
     blur() {
         this.template.querySelector('input')?.blur();