Merge pull request #38 from Travelopia/fix/multi-select-search

Fix the search and selection issue

Author: junaid-travelopia

package.json

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

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

@@ -13,7 +13,11 @@ export class TPMultiSelectPillsElement extends HTMLElement {
 	 * Connected callback.
 	 */
 	connectedCallback(): void {
+		// Events.
 		this.closest( 'tp-multi-select' )?.addEventListener( 'change', this.update.bind( this ) );
+		this.closest( 'tp-multi-select' )?.querySelector( 'select' )?.addEventListener( 'change', ( () => this.update() ) as EventListener );
+
+		// Update.
 		this.update();
 	}
 

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

@@ -67,7 +67,7 @@ export class TPMultiSelectSearchElement extends HTMLElement {
 		let matchedOptionCount = 0;
 		// Hide and show options based on search.
 		options.forEach( ( option: TPMultiSelectOptionElement ): void => {
-			if ( option.getAttribute( 'label' )?.toLowerCase().match( new RegExp( `.*${ search.value.replace( /\s/g, '.*' ) }.*` ) ) ) {
+			if ( option.getAttribute( 'label' )?.toLowerCase().match( new RegExp( `.*${ search.value.toLowerCase().replace( /\s/g, '.*' ) }.*` ) ) ) {
 				option.removeAttribute( 'hidden' );
 				matchedOptionCount++;
 			} else {