fix(select-with-autocomplete): improve select open after input changed (

#3110)
akveo · Sep 14, 2022 · eaa036b · eaa036b
1 parent 3bea394
commit eaa036b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/...amework/theme/components/select-with-autocomplete/select-with-autocomplete.component.html b/...amework/theme/components/select-with-autocomplete/select-with-autocomplete.component.html
@@ -42,6 +42,7 @@
     [fieldSize]="size"
     (blur)="trySetTouched()"
     (click)="$event.stopPropagation()"
+    (dblclick)="$event.stopPropagation()"
     (input)="onAutocompleteInputChange($event)"
   />
   <nb-icon nbSuffix icon="chevron-up-outline" pack="nebular-essentials" aria-hidden="true"> </nb-icon>

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
@@ -256,6 +256,9 @@ export class NbSelectWithAutocompleteComponent
   }
   set multiple(value: boolean) {
     this._multiple = convertToBoolProperty(value);
+
+    this.updatePositionStrategy();
+    this.updateCurrentKeyManager();
   }
   protected _multiple: boolean = false;
   static ngAcceptInputType_multiple: NbBooleanInput;
@@ -282,7 +285,7 @@ export class NbSelectWithAutocompleteComponent
    */
   @Input()
   set withOptionsAutocomplete(value: boolean) {
-    this._withOptionsAutocomplete = value;
+    this._withOptionsAutocomplete = convertToBoolProperty(value);
     this.updatePositionStrategy();
     this.updateCurrentKeyManager();
 
@@ -469,7 +472,7 @@ export class NbSelectWithAutocompleteComponent
       return this.selectionModel.map((option: NbOptionComponent) => option.content).join(', ');
     }
 
-    return this.selectionModel[0]?.content ?? '';
+    return this.selectionModel[0]?.content?.trim() ?? '';
   }
 
   ngOnChanges({ disabled, status, size, fullWidth }: SimpleChanges) {

diff --git a/src/playground/with-layout/select/select-autocomplete-showcase.component.html b/src/playground/with-layout/select/select-autocomplete-showcase.component.html
@@ -1,10 +1,12 @@
 <nb-card size="small">
   <nb-card-body>
     <button nbButton (click)="withAutocomplete = !withAutocomplete">Toggle autocomplete: {{ withAutocomplete }}</button>
+    <button nbButton (click)="multiple = !multiple">Toggle multiple: {{ multiple }}</button>
     <nb-select-with-autocomplete
       placeholder="Select Showcase"
       [(selected)]="selectedItem"
       [withOptionsAutocomplete]="withAutocomplete"
+      [multiple]="multiple"
       (optionsAutocompleteInputChange)="filterValue = $event"
     >
       <nb-option value="">Option empty</nb-option>

diff --git a/src/playground/with-layout/select/select-autocomplete-showcase.component.ts b/src/playground/with-layout/select/select-autocomplete-showcase.component.ts
@@ -12,6 +12,7 @@ import { Component } from '@angular/core';
 })
 export class SelectAutocompleteShowcaseComponent {
   withAutocomplete = true;
+  multiple = false;
   selectedItem = '2';
   filterValue = '';