feat(autocomplete-item): add calciteAutocompleteItemSelect event

packages/calcite-components/src/components/autocomplete-item/autocomplete-item.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import { LitElement, property, createEvent, h, JsxNode } from "@arcgis/lumina";
+import { LitElement, property, createEvent, h, JsxNode, method } from "@arcgis/lumina";
 import { FlipContext, Scale } from "../interfaces";
 import { getIconScale } from "../../utils/component";
 import {
@@ -24,13 +24,13 @@ declare global {
  * @slot content-start - A slot for adding non-actionable elements before content of the component.
  */
 export class AutocompleteItem extends LitElement implements InteractiveComponent {
-  // #region Static Members
+  //#region Static Members
 
   static override styles = styles;
 
-  // #endregion
+  //#endregion
 
-  // #region Public Properties
+  //#region Public Properties
 
   /**
    * True when the item is highlighted from keyboard interaction.
@@ -88,37 +88,49 @@ export class AutocompleteItem extends LitElement implements InteractiveComponent
   /** The component's value. */
   @property() value: string;
 
-  // #endregion
+  //#endregion
 
-  // #region Events
+  //#region Public Methods
 
   /**
-   * Fires when the item has been selected.
+   * Emits the `calciteAutocompleteItemSelect` event.
    *
    * @private
    */
-  calciteInternalAutocompleteItemSelect = createEvent({ cancelable: false });
+  @method()
+  emitSelectEvent(): void {
+    this.calciteAutocompleteItemSelect.emit();
+  }
+
+  //#endregion
+
+  //#region Events
+
+  /**
+   * Fires when the item has been selected.
+   */
+  calciteAutocompleteItemSelect = createEvent({ cancelable: false });
 
-  // #endregion
+  //#endregion
 
-  // #region Lifecycle
+  //#region Lifecycle
 
   override updated(): void {
     updateHostInteraction(this);
   }
 
-  // #endregion
+  //#endregion
 
-  // #region Private Methods
+  //#region Private Methods
 
   private handleClick(event: MouseEvent): void {
     event.preventDefault();
-    this.calciteInternalAutocompleteItemSelect.emit();
+    this.emitSelectEvent();
   }
 
-  // #endregion
+  //#endregion
 
-  // #region Rendering
+  //#region Rendering
 
   override render(): JsxNode {
     const { active, description, heading, disabled, inputValueMatchPattern } = this;
@@ -171,5 +183,5 @@ export class AutocompleteItem extends LitElement implements InteractiveComponent
     ) : null;
   }
 
-  // #endregion
+  //#endregion
 }

packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts

@@ -308,6 +308,29 @@ describe("calcite-autocomplete", () => {
     ]);
   });
 
+  it("should emit calciteAutocompleteItemSelect", async () => {
+    const page = await newE2EPage();
+    await page.setContent(simpleHTML);
+
+    const autocomplete = await page.find("#myAutocomplete");
+    const item = await page.find("calcite-autocomplete-item[value='two']");
+    const itemChangeSpy = await autocomplete.spyOnEvent("calciteAutocompleteItemSelect");
+
+    await autocomplete.callMethod("setFocus");
+    await page.waitForChanges();
+    await item.click();
+
+    expect(itemChangeSpy).toHaveReceivedEventTimes(1);
+
+    await autocomplete.callMethod("setFocus");
+    await page.waitForChanges();
+    await page.keyboard.press("ArrowDown");
+    await page.keyboard.press("Enter");
+    await page.waitForChanges();
+
+    expect(itemChangeSpy).toHaveReceivedEventTimes(2);
+  });
+
   describe("translation support", () => {
     t9n("calcite-autocomplete");
   });

packages/calcite-components/src/components/autocomplete/autocomplete.tsx

@@ -431,7 +431,7 @@ export class Autocomplete
   constructor() {
     super();
     this.listenOn(document, "click", this.documentClickHandler);
-    this.listen("calciteInternalAutocompleteItemSelect", this.handleInternalAutocompleteItemSelect);
+    this.listen("calciteAutocompleteItemSelect", this.handleAutocompleteItemSelect);
   }
 
   override connectedCallback(): void {
@@ -557,9 +557,8 @@ export class Autocomplete
     this.open = false;
   }
 
-  private async handleInternalAutocompleteItemSelect(event: Event): Promise<void> {
+  private async handleAutocompleteItemSelect(event: Event): Promise<void> {
     this.value = (event.target as AutocompleteItem["el"]).value;
-    event.stopPropagation();
     this.emitChange();
     await this.setFocus();
     this.open = false;
@@ -686,7 +685,7 @@ export class Autocomplete
       case "Enter":
         if (open && activeItem) {
           this.value = activeItem.value;
-          this.emitChange();
+          activeItem.emitSelectEvent();
           this.open = false;
           event.preventDefault();
         } else if (!event.defaultPrevented) {