diff --git a/package.json b/package.json index af74faf..e474e87 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@travelopia/web-components", - "version": "0.5.17", + "version": "0.5.18", "description": "Accessible web components for the modern web", "files": [ "dist" diff --git a/src/multi-select/tp-multi-select-pill.ts b/src/multi-select/tp-multi-select-pill.ts index 7277ae8..352d002 100644 --- a/src/multi-select/tp-multi-select-pill.ts +++ b/src/multi-select/tp-multi-select-pill.ts @@ -13,16 +13,24 @@ export class TPMultiSelectPillElement extends HTMLElement { connectedCallback(): void { this.querySelector( 'button' )?.addEventListener( 'click', this.handleButtonClick.bind( this ) ); } - /** * Handle button click. * - * @param {Event} e Click event. + * @param {any} e Click event. */ - handleButtonClick( e: Event | null ): void { + handleButtonClick( e: any | null ): void { e?.preventDefault(); e?.stopPropagation(); - this.removePill(); + + /** + * If the event is has a pointerType, which means it's a mouse event or touch event + * Only then we remove pill. + * This will ensure, it will not get fired when a enter button is pressed. + * We do this so that it does not remove the pills when enter button is pressed. + */ + if ( e?.pointerType ) { + this.removePill(); + } } /**