Multi-select component not compatible with Modal Component

[Souptik2001]

In the multi-select component we are attaching a click event handler to the tp-multi-select-field component in the connectedCallback function -

web-components/src/multi-select/tp-multi-select-field.ts

Lines 13 to 15 in 0282694

	connectedCallback(): void {
	this.addEventListener( 'click', this.toggleOpen.bind( this ) );
	}

But here is a edge case for that. Suppose we use this component inside a modal where we take the modal content and append it at the end of the body something like this -

this.body.appendChild( this );

In this case the connectedCallback of the multi-select component runs twice, and because of that the event listener gets attached twice to the element. And because of this the options dropdown never opens, because one of the event listener opens it and another closes it instantly.
Here I have given example of modal, but this is true with any wrapper which removes and attaches the component again and again.

So, to solve this issue, I see two possibilities -

• Use constructor instead of connectedCallback, which will run only once -

constructor() {
  super();
  this.addEventListener("click", this.toggleOpen.bind(this));
}

• Or remove the event listener before adding it -

connectedCallback() {
	this.removeEventListener("click", this.toggleOpen.bind(this));
	this.addEventListener("click", this.toggleOpen.bind(this));
}

@junaidbhura @i-am-chitti Please let me know your thoughts on that. 🙏

[junaidbhura]

@Souptik2001 I like the second solution, so we are sure that event listeners are removed. But its weird that it wouldn't do this automatically!

Have you verified this approach?

[Souptik2001]

Thanks @junaidbhura !

One more approach which I wanted to suggest is something like this -

connectedCallback() {
	if ( true === this.intialized ) {
		return;
	}

	this.addEventListener("click", this.toggleOpen.bind(this));

	this.intialized = true;
}

Do you think this will be cleaner?
I also tried with disconnectedCallback but seems like that callback is not running only the connectedCallback is running twice.

[junaidbhura]

Fixed in https://github.com/Travelopia/web-components/releases/tag/0.5.16