diff --git a/src/multi-select/index.html b/src/multi-select/index.html index 1c642d0..18a20d8 100644 --- a/src/multi-select/index.html +++ b/src/multi-select/index.html @@ -46,7 +46,7 @@ } tp-multi-select-option + tp-multi-select-option { - border-top: 1px solid #000; + background-color: gainsboro; } tp-multi-select-select-all[selected="yes"]::after, @@ -97,14 +97,18 @@ - Select All - Priya - Varun - John - Jane - Jack - Jill - +
+
Most Popular
+ Japan + Maldiverna + USA +
+
+
Asia
+ Japan + India +
+ diff --git a/src/multi-select/tp-multi-select-pills.ts b/src/multi-select/tp-multi-select-pills.ts index c6b03f3..65e6e6c 100644 --- a/src/multi-select/tp-multi-select-pills.ts +++ b/src/multi-select/tp-multi-select-pills.ts @@ -39,7 +39,7 @@ export class TPMultiSelectPillsElement extends HTMLElement { // Determine pills. const pills: NodeListOf | null = this.querySelectorAll( 'tp-multi-select-pill' ); - const values: string[] = multiSelect.value ?? []; + const values: string[] = [ ...new Set( multiSelect.value ) ] ?? []; const pillValues: string[] = []; // Remove pills that shouldn't exist.