From 8a28474cc2db6afa425e8779abf06f913924beff Mon Sep 17 00:00:00 2001
From: Imran Sayed <imranhsayed@gmail.com>
Date: Tue, 20 Feb 2024 23:55:54 -0600
Subject: [PATCH] Fix the search and selection issue

---
 package.json                               | 2 +-
 src/multi-select/tp-multi-select-pills.ts  | 4 ++++
 src/multi-select/tp-multi-select-search.ts | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index fbdb458..af74faf 100644
--- a/package.json
+++ b/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"
diff --git a/src/multi-select/tp-multi-select-pills.ts b/src/multi-select/tp-multi-select-pills.ts
index 66103d7..de58910 100644
--- a/src/multi-select/tp-multi-select-pills.ts
+++ b/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();
 	}
 
diff --git a/src/multi-select/tp-multi-select-search.ts b/src/multi-select/tp-multi-select-search.ts
index eab4445..fc57398 100644
--- a/src/multi-select/tp-multi-select-search.ts
+++ b/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 {