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

Multi Select: Fix search issue

Author: junaid-travelopia

package.json

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

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

@@ -28,10 +28,16 @@ export class TPMultiSelectOptionElement extends HTMLElement {
 
 		if ( 'yes' !== this.getAttribute( 'selected' ) ) {
 			multiSelect?.select( value );
-			multiSelect?.dispatchEvent( new CustomEvent( 'select', { bubbles: true } ) );
+			multiSelect?.dispatchEvent( new CustomEvent( 'select', {
+				bubbles: true,
+				detail: { value },
+			} ) );
 		} else {
 			multiSelect?.unSelect( value );
-			multiSelect?.dispatchEvent( new CustomEvent( 'unselect', { bubbles: true } ) );
+			multiSelect?.dispatchEvent( new CustomEvent( 'unselect', {
+				bubbles: true,
+				detail: { value },
+			} ) );
 		}
 		multiSelect?.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );
 	}

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( 'value' )?.match( new RegExp( `.*${ search.value }.*` ) ) ) {
+			if ( option.getAttribute( 'label' )?.toLowerCase().match( new RegExp( `.*${ search.value.replace( /\s/g, '.*' ) }.*` ) ) ) {
 				option.removeAttribute( 'hidden' );
 				matchedOptionCount++;
 			} else {