From 4cd7d67cc76e120290806fef0fa877100f4cca91 Mon Sep 17 00:00:00 2001
From: Mustafa <mustafa.adiguzel@std.izmirekonomi.edu.tr>
Date: Thu, 29 Sep 2022 13:49:42 +0300
Subject: [PATCH] fix(select): popover and selected issue (#257)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mustafa Adıgüzel <mustafa.adiguzel@trendyol.com>
Co-authored-by: Murat Çorlu <127687+muratcorlu@users.noreply.github.com>
---
 src/components/select/bl-select.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts
index 968ebbc2..ebda1569 100644
--- a/src/components/select/bl-select.ts
+++ b/src/components/select/bl-select.ts
@@ -133,17 +133,19 @@ export default class BlSelect extends LitElement {
   open() {
     this._isPopoverOpen = true;
     this._setupPopover();
+    document.addEventListener('click', this._clickOutsideHandler);
   }
 
   close() {
     this._isPopoverOpen = false;
     this._cleanUpPopover && this._cleanUpPopover();
+    document.removeEventListener('click', this._clickOutsideHandler);
   }
 
   private _clickOutsideHandler = (event: MouseEvent) => {
-    const target = event.target as HTMLElement;
+    const eventPath = event.composedPath() as HTMLElement[];
 
-    if (!this.contains(target) && this._isPopoverOpen) {
+    if (!eventPath?.find(el => el.tagName === 'BL-SELECT')?.contains(this)) {
       this.close();
       this._checkRequired();
     }
@@ -174,13 +176,10 @@ export default class BlSelect extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-
-    document.addEventListener('click', this._clickOutsideHandler);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
 
-    document.removeEventListener('click', this._clickOutsideHandler);
     this._cleanUpPopover && this._cleanUpPopover();
   }
 
@@ -266,7 +265,7 @@ export default class BlSelect extends LitElement {
   }
 
   private _handleSingleSelect(optionItem: ISelectOption) {
-    const oldItem = this._connectedOptions.find(option => option.selected);
+    const oldItem = this._connectedOptions.find(option => option.value !== optionItem.value && option.selected);
 
     if (oldItem) {
       oldItem.selected = false;