From a182b973c0af60ca2f7f794b381e4dadd5ffd962 Mon Sep 17 00:00:00 2001
From: Andrew Costa Silva <andrew.costa@take.net>
Date: Mon, 13 Nov 2023 14:35:10 -0300
Subject: [PATCH 1/3] fix: removed unnecessary focus on div

---
 .../selects/select-chips/select-chips.tsx     | 20 ++-----------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/src/components/selects/select-chips/select-chips.tsx b/src/components/selects/select-chips/select-chips.tsx
index 70d56831..e3100d71 100644
--- a/src/components/selects/select-chips/select-chips.tsx
+++ b/src/components/selects/select-chips/select-chips.tsx
@@ -443,16 +443,6 @@ export class SelectChips {
     return opt?.titleText ? opt.titleText : opt?.textContent?.trim() ?? '';
   };
 
-  private setFocusWrapper = (): void => {
-    if (this.nativeInput) {
-      this.nativeInput.focus();
-    }
-  };
-
-  private removeFocusWrapper = (): void => {
-    this.nativeInput.blur();
-  };
-
   private validateChips() {
     if (this.type === 'email') {
       return !this.internalChips.some((chip) => !this.validateChip(chip));
@@ -744,13 +734,7 @@ export class SelectChips {
     }
 
     return (
-      <div
-        class="select"
-        tabindex="0"
-        onFocus={this.setFocusWrapper}
-        onBlur={this.removeFocusWrapper}
-        onKeyPress={this.keyPressWrapper}
-      >
+      <div class="select" tabindex="0">
         <div class={{ element_input: true }} aria-disabled={this.disabled ? 'true' : null} onClick={this.toggle}>
           <div
             class={{
@@ -762,7 +746,6 @@ export class SelectChips {
               'input--label': !!this.label,
               'input--pressed': isPressed,
             }}
-            onClick={this.onClickWrapper}
             onKeyDown={this.keyPressWrapper}
           >
             {this.renderIcon()}
@@ -783,6 +766,7 @@ export class SelectChips {
                   value={this.value}
                   disabled={this.disabled}
                   data-test={this.dataTest}
+                  onClick={this.onClickWrapper}
                 ></input>
               </div>
             </div>

From 18e0c3bcac98a444d22f85058b74727eea1ddd15 Mon Sep 17 00:00:00 2001
From: Andrew Costa Silva <andrew.costa@take.net>
Date: Tue, 14 Nov 2023 08:13:11 -0300
Subject: [PATCH 2/3] fix: removed toggle on every click

---
 .../selects/select-chips/select-chips.tsx        | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/selects/select-chips/select-chips.tsx b/src/components/selects/select-chips/select-chips.tsx
index e3100d71..4f0ebbf2 100644
--- a/src/components/selects/select-chips/select-chips.tsx
+++ b/src/components/selects/select-chips/select-chips.tsx
@@ -396,9 +396,15 @@ export class SelectChips {
     return chips.some((chip) => optionChip === chip);
   }
 
-  private toggle = (): void => {
+  private open = (): void => {
     if (!this.disabled) {
-      this.isOpen = !this.isOpen;
+      this.isOpen = true;
+    }
+  };
+
+  private close = (): void => {
+    if (!this.disabled) {
+      this.isOpen = false;
     }
   };
 
@@ -408,12 +414,12 @@ export class SelectChips {
     } = event;
     const text = this.getText(value);
     await this.addChip(text);
-    this.toggle();
+    this.close();
   };
 
   private handlerNewOption = async (text: string) => {
     await this.addChip(text);
-    this.toggle();
+    this.close();
   };
 
   private enableCreateOption(): boolean {
@@ -735,7 +741,7 @@ export class SelectChips {
 
     return (
       <div class="select" tabindex="0">
-        <div class={{ element_input: true }} aria-disabled={this.disabled ? 'true' : null} onClick={this.toggle}>
+        <div class={{ element_input: true }} aria-disabled={this.disabled ? 'true' : null} onClick={this.open}>
           <div
             class={{
               input: true,

From 9b7e4371b2e0526a2d02be5039abbe48b4be6fdd Mon Sep 17 00:00:00 2001
From: Andrew Costa Silva <andrew.costa@take.net>
Date: Tue, 14 Nov 2023 09:13:06 -0300
Subject: [PATCH 3/3] refactor: using handler on add via click and enter

---
 .../selects/select-chips/select-chips.tsx         | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/selects/select-chips/select-chips.tsx b/src/components/selects/select-chips/select-chips.tsx
index 4f0ebbf2..5e94417c 100644
--- a/src/components/selects/select-chips/select-chips.tsx
+++ b/src/components/selects/select-chips/select-chips.tsx
@@ -402,24 +402,18 @@ export class SelectChips {
     }
   };
 
-  private close = (): void => {
-    if (!this.disabled) {
-      this.isOpen = false;
-    }
-  };
-
   private handler = async (event: CustomEvent) => {
     const {
       detail: { value },
     } = event;
     const text = this.getText(value);
-    await this.addChip(text);
-    this.close();
+    this.handlerNewOption(text);
   };
 
   private handlerNewOption = async (text: string) => {
     await this.addChip(text);
-    this.close();
+    this.clearInputValues();
+    this.resetFilterOptions();
   };
 
   private enableCreateOption(): boolean {
@@ -492,8 +486,7 @@ export class SelectChips {
       case 'Enter':
         if (this.canAddNew !== false) {
           this.handleDelimiters();
-          this.setChip(this.value);
-          this.value = '';
+          this.handlerNewOption(this.value);
         }
         break;
       case 'Backspace' || 'Delete':