From b62099f802c771d70e331e5c28da4cbf367dc538 Mon Sep 17 00:00:00 2001
From: Souptik Datta <souptikdatta2001@gmail.com>
Date: Tue, 20 Feb 2024 11:44:44 +0530
Subject: [PATCH] fix: Fix duplicate event listeners in multi-select component

Signed-off-by: Souptik Datta <souptikdatta2001@gmail.com>
---
 package-lock.json                          |  4 ++--
 package.json                               |  2 +-
 src/multi-select/tp-multi-select-field.ts  | 13 +++++++++++++
 src/multi-select/tp-multi-select-option.ts | 13 +++++++++++++
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6541f22..2a38850 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@travelopia/web-components",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@travelopia/web-components",
-      "version": "0.5.15",
+      "version": "0.5.16",
       "license": "MIT",
       "devDependencies": {
         "@wordpress/eslint-plugin": "^17.1.0",
diff --git a/package.json b/package.json
index 801bd8a..fbdb458 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@travelopia/web-components",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "description": "Accessible web components for the modern web",
   "files": [
     "dist"
diff --git a/src/multi-select/tp-multi-select-field.ts b/src/multi-select/tp-multi-select-field.ts
index c4ecbb3..52f3a5e 100644
--- a/src/multi-select/tp-multi-select-field.ts
+++ b/src/multi-select/tp-multi-select-field.ts
@@ -7,10 +7,23 @@ import { TPMultiSelectElement } from './tp-multi-select';
  * TP Multi Select Field.
  */
 export class TPMultiSelectFieldElement extends HTMLElement {
+	/**
+	 * Properties.
+	 */
+	private initialized: boolean = false;
+
 	/**
 	 * Connected callback.
 	 */
 	connectedCallback(): void {
+		// Return early if already initialized.
+		if ( true === this.initialized ) {
+			return;
+		}
+
+		// Set initialized flag to true.
+		this.initialized = true;
+
 		this.addEventListener( 'click', this.toggleOpen.bind( this ) );
 	}
 
diff --git a/src/multi-select/tp-multi-select-option.ts b/src/multi-select/tp-multi-select-option.ts
index eb2d66f..f6e6b8b 100644
--- a/src/multi-select/tp-multi-select-option.ts
+++ b/src/multi-select/tp-multi-select-option.ts
@@ -7,10 +7,23 @@ import { TPMultiSelectElement } from './tp-multi-select';
  * TP Multi Select Option.
  */
 export class TPMultiSelectOptionElement extends HTMLElement {
+	/**
+	 * Properties.
+	 */
+	private initialized: boolean = false;
+
 	/**
 	 * Connected callback.
 	 */
 	connectedCallback(): void {
+		// Return early if already initialized.
+		if ( true === this.initialized ) {
+			return;
+		}
+
+		// Set initialized flag to true.
+		this.initialized = true;
+
 		this.addEventListener( 'click', this.toggle.bind( this ) );
 	}