From aebfe43f12d15dcd67359beef631d10d6b43552c Mon Sep 17 00:00:00 2001 From: Imran Sayed Date: Sat, 20 Jan 2024 19:58:37 -0600 Subject: [PATCH 1/2] Fix search --- package.json | 2 +- src/multi-select/tp-multi-select-search.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b291105..645a006 100644 --- a/package.json +++ b/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" diff --git a/src/multi-select/tp-multi-select-search.ts b/src/multi-select/tp-multi-select-search.ts index d829df3..aab9e31 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( 'value' )?.match( new RegExp( `.*${ search.value }.*` ) ) ) { + if ( option.getAttribute( 'label' )?.toLowerCase().match( new RegExp( `.*${ search.value.replace( /\s/g, '.*' ) }.*` ) ) ) { option.removeAttribute( 'hidden' ); matchedOptionCount++; } else { From ff265cdea361bdcd830d7024a851e3ac4305ccc2 Mon Sep 17 00:00:00 2001 From: Imran Sayed Date: Sun, 21 Jan 2024 11:54:15 -0600 Subject: [PATCH 2/2] Update the select custom event for multiselect --- src/multi-select/tp-multi-select-option.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/multi-select/tp-multi-select-option.ts b/src/multi-select/tp-multi-select-option.ts index 9774758..eb2d66f 100644 --- a/src/multi-select/tp-multi-select-option.ts +++ b/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 } ) ); }