feat(select-with-autocomplete): add search when multi (#3204)

akveo · Sep 5, 2023 · 8792f84 · 8792f84
1 parent 4c4d846
commit 8792f84
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/.../theme/components/select-with-autocomplete/_select-with-autocomplete.component.theme.scss b/.../theme/components/select-with-autocomplete/_select-with-autocomplete.component.theme.scss
@@ -58,6 +58,30 @@
     }
   }
 
+  // Need to make focus and active style the same
+  nb-option {
+    &:focus,
+    &.active {
+      background-color: nb-theme(option-focus-background-color);
+      color: nb-theme(option-focus-text-color);
+      outline: none;
+      &.selected {
+        background-color: nb-theme(option-selected-focus-background-color);
+        color: nb-theme(option-selected-focus-text-color);
+      }
+    }
+
+    &.multiple {
+      &:focus,
+      &.active,
+      &.selected:focus,
+      &.selected.active {
+        background-color: nb-theme(option-focus-background-color);
+        color: nb-theme(option-focus-text-color);
+      }
+    }
+  }
+
   @include select-with-autocomplete-outline.select-with-autocomplete-outline();
   @include select-with-autocomplete-filled.select-with-autocomplete-filled();
   @include select-with-autocomplete-hero.select-with-autocomplete-hero();

diff --git a/...framework/theme/components/select-with-autocomplete/select-with-autocomplete.component.ts b/...framework/theme/components/select-with-autocomplete/select-with-autocomplete.component.ts
@@ -344,7 +344,7 @@ export class NbSelectWithAutocompleteComponent
   }
 
   get isOptionsAutocompleteAllowed(): boolean {
-    return this.withOptionsAutocomplete && !this.multiple;
+    return this.withOptionsAutocomplete;
   }
 
   get isOptionsAutocompleteInputShown(): boolean {
@@ -470,6 +470,10 @@ export class NbSelectWithAutocompleteComponent
    * Content rendered in the label.
    * */
   get selectionView() {
+    if (this.isOptionsAutocompleteInputShown && this.multiple) {
+      return '';
+    }
+
     if (this.selectionModel.length > 1) {
       return this.selectionModel.map((option: NbOptionComponent) => option.content).join(', ');
     }