Merge pull request #50 from Travelopia/fix/firefox-multi-select-pill

Fix: Multi-Select Cross Browser Pill Remove

Author: junaid-travelopia

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@travelopia/web-components",
-  "version": "0.5.19",
+  "version": "0.5.21",
   "description": "Accessible web components for the modern web",
   "files": [
     "dist"

package.json

@@ -93,7 +93,7 @@
 			<tp-multi-select-field>
 				<tp-multi-select-pills></tp-multi-select-pills>
 				<tp-multi-select-search>
-					<input placeholder="Select...">
+					<input type="text" placeholder="Select...">
 				</tp-multi-select-search>
 			</tp-multi-select-field>
 			<tp-multi-select-options>

src/multi-select/index.html

@@ -16,21 +16,12 @@ export class TPMultiSelectPillElement extends HTMLElement {
 	/**
 	 * Handle button click.
 	 *
-	 * @param {any} e Click event.
+	 * @param {Event} e Click event.
 	 */
-	handleButtonClick( e: any | null ): void {
+	handleButtonClick( e: Event | null ): void {
 		e?.preventDefault();
 		e?.stopPropagation();
-
-		/**
-		 * 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();
-		}
+		this.removePill();
 	}
 
 	/**

src/multi-select/tp-multi-select-pill.ts

@@ -67,7 +67,7 @@ export class TPMultiSelectPillsElement extends HTMLElement {
 			newPill.setAttribute( 'value', pillValue );
 			newPill.innerHTML = `
 			<span>${ multiSelectOption.getAttribute( 'label' ) ?? '' }</span>
-			<button>x</button>
+			<button type="button">x</button>
 			`;
 			this.appendChild( newPill );
 		} );

src/multi-select/tp-multi-select-pills.ts

@@ -38,6 +38,9 @@ export class TPMultiSelectSearchElement extends HTMLElement {
 		}
 
 		switch ( e.key ) {
+			case 'Enter':
+				e.preventDefault(); // Prevent inadvertent form submits.
+				break;
 			case 'ArrowDown':
 				multiSelect.setAttribute( 'open', 'yes' );
 				break;