fix(autocomplete): fixing problem with multiple selection

takenet · May 28, 2024 · 1a735a4 · 1a735a4
1 parent 75e2e58
commit 1a735a4
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss
@@ -407,12 +407,10 @@ $select-options-max-height: 250px;
       width: 100%;
       padding: 8px 16px;
       box-sizing: border-box;
-      background-color: $color-surface-1;
     }
 
     .select-all {
       order: -3;
-      background-color: var(--color-surface-1, #f6f6f6);
       padding: 8px 8px 8px 12px;
       box-sizing: border-box;
       display: flex;

diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
@@ -344,7 +344,6 @@ export class BdsAutocomplete {
     this.isFocused = true;
     this.isPressed = true;
     this.bdsFocus.emit();
-    if (this.selectionType == 'multiple') this.textMultiselect = '';
   };
 
   private onFocusout = (): void => {
@@ -356,12 +355,13 @@ export class BdsAutocomplete {
   private onBlur = (): void => {
     this.bdsBlur.emit();
     this.isPressed = false;
-    if (this.selectionType == 'multiple' && this.checkedOptions?.length > 0)
-      this.getTextMultiselect(this.checkedOptions);
     if (!this.isOpen) {
       this.isFocused = false;
       this.nativeInput.value = this.getText();
+      this.cleanInputSelection();
     }
+    if (this.selectionType == 'multiple' && this.checkedOptions?.length > 0)
+      this.getTextMultiselect(this.checkedOptions);
   };
 
   private onClickWrapper = (): void => {
@@ -403,7 +403,14 @@ export class BdsAutocomplete {
 
   private handlerMultiselect = (): void => {
     this.updateListChecked(this.childOptions);
-    this.checkAllInput.checked = false;
+    this.nativeInput.value = '';
+    this.value = undefined;
+    this.resetFilterOptions();
+    if (this.childOptions.length != this.checkedOptions.length) {
+      setTimeout(() => {
+        this.checkAllInput.checked = false;
+      }, 10);
+    }
   };
 
   private handleCheckAll = (event: CustomEvent): void => {
@@ -674,7 +681,7 @@ export class BdsAutocomplete {
                 {this.selectionTitle}
               </bds-typo>
             )}
-            {this.selectionType == 'multiple' && (this.value == null || this.value.length <= 0) && (
+            {this.selectionType == 'multiple' && (this.value == null) && (
               <bds-checkbox
                 ref={this.refCheckAllInput}
                 refer={`refer-multiselect`}

diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
@@ -21,7 +21,6 @@ $checkbox-spacing-text: 8px;
   }
 
   &__icon {
-    background: $color-surface-1;
     position: relative;
 
     &::before {

diff --git a/src/components/select-option/select-option.scss b/src/components/select-option/select-option.scss
@@ -55,7 +55,6 @@ $select-option-left: 12px;
 
     &__checkbox {
       cursor: pointer;
-      background-color: $color-surface-1;
       padding: $select-option-padding;
       padding-left: $select-option-left;
       box-sizing: border-box;