Merge pull request #84 from Travelopia/feature/multi-select-unique-pills

Fix: Multi-Select - Allow unique pills incase of duplicate values
Travelopia · Jan 30, 2025 · a1d8edc · a1d8edc
2 parents 1ff3267 + a22976d
commit a1d8edc
Showing 2 changed files with 14 additions and 10 deletions.
diff --git 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 @@
 				</tp-multi-select-search>
 			</tp-multi-select-field>
 			<tp-multi-select-options>
-				<tp-multi-select-select-all select-text="Select All" unselect-text="Un-Select All">Select All</tp-multi-select-select-all>
-				<tp-multi-select-option value="priya" label="Priya">Priya</tp-multi-select-option>
-				<tp-multi-select-option value="varun" label="Varun">Varun</tp-multi-select-option>
-				<tp-multi-select-option value="john" label="John">John</tp-multi-select-option>
-				<tp-multi-select-option value="jane" label="Jane">Jane</tp-multi-select-option>
-				<tp-multi-select-option value="jack" label="Jack">Jack</tp-multi-select-option>
-				<tp-multi-select-option value="jill" label="Jill" disabled="yes">Jill</tp-multi-select-option>
-			</tp-multi-select-options>
+				<div>
+					<div>Most Popular</div>
+					<tp-multi-select-option value="Japan" label="Japan">Japan</tp-multi-select-option> 
+					<tp-multi-select-option value="Maldiverna" label="Maldiverna">Maldiverna</tp-multi-select-option> 
+					<tp-multi-select-option value="USA" label="USA">USA</tp-multi-select-option> 
+				</div>
+				<div>
+					<div>Asia</div>
+					<tp-multi-select-option value="Japan" label="Japan">Japan</tp-multi-select-option>
+					<tp-multi-select-option value="India" label="India">India</tp-multi-select-option>
+				</div>
+			 </tp-multi-select-options>
 		</tp-multi-select>
 	</main>
 </body>

diff --git 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<TPMultiSelectPillElement> | 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.