diff --git a/packages/calcite-components/src/components/autocomplete-item/autocomplete-item.tsx b/packages/calcite-components/src/components/autocomplete-item/autocomplete-item.tsx index 6baae9f7395..a8bcf71d37a 100644 --- a/packages/calcite-components/src/components/autocomplete-item/autocomplete-item.tsx +++ b/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 } diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts b/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts index 920b065de53..ce4ef428daf 100644 --- a/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts +++ b/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"); }); diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx index f3b60205afb..6e97cedfca6 100644 --- a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx +++ b/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 { + private async handleAutocompleteItemSelect(event: Event): Promise { 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) {