Merge pull request #36 from Travelopia/fix/35-mutli-select-duplicate-event-listeners

Fix duplicate event listeners in multi-select component

Author: junaid-travelopia

package-lock.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"

package.json

@@ -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 ) );
 	}
 

src/multi-select/tp-multi-select-field.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 ) );
 	}