fix(select-with-autocomplete): fix select autocomplete width (#3113)

akveo · Sep 22, 2022 · 078c9f3 · 078c9f3
1 parent f4452f7
commit 078c9f3
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 12 deletions.
diff --git a/...framework/theme/components/select-with-autocomplete/_select-with-autocomplete-filled.scss b/...framework/theme/components/select-with-autocomplete/_select-with-autocomplete-filled.scss
@@ -8,10 +8,32 @@
   }
 
   @each $size in nb-get-sizes() {
-    nb-select-with-autocomplete.appearance-filled.size-#{$size} .select-button {
-      padding: nb-theme(select-filled-#{$size}-padding);
-      @include nb-ltr(padding-right, nb-theme(select-icon-offset));
-      @include nb-rtl(padding-left, nb-theme(select-icon-offset));
+    nb-select-with-autocomplete.appearance-filled.size-#{$size} {
+      .select-button {
+        padding: nb-theme(select-filled-#{$size}-padding);
+        @include nb-ltr(padding-right, nb-theme(select-icon-offset));
+        @include nb-rtl(padding-left, nb-theme(select-icon-offset));
+      }
+
+      .nb-form-field-prefix-#{$size},
+      .nb-form-field-suffix-#{$size} {
+        width: nb-theme(select-icon-offset);
+      }
+
+      .nb-form-field-prefix-#{$size} {
+        @include nb-ltr(margin-right, calc(#{nb-theme(select-icon-offset)} * -1));
+        @include nb-rtl(margin-left, calc(#{nb-theme(select-icon-offset)} * -1));
+      }
+
+      .nb-form-field-suffix-#{$size} {
+        @include nb-ltr(margin-left, calc(#{nb-theme(select-icon-offset)} * -1));
+        @include nb-rtl(margin-right, calc(#{nb-theme(select-icon-offset)} * -1));
+      }
+
+      [nbInput] {
+        @include nb-ltr(padding-right, nb-theme(select-icon-offset));
+        @include nb-rtl(padding-left, nb-theme(select-icon-offset));
+      }
     }
 
     @include form-field-theme.nb-form-field-with-prefix(

diff --git a/src/framework/theme/components/select-with-autocomplete/_select-with-autocomplete-hero.scss b/src/framework/theme/components/select-with-autocomplete/_select-with-autocomplete-hero.scss
@@ -7,10 +7,32 @@
   }
 
   @each $size in nb-get-sizes() {
-    nb-select-with-autocomplete.appearance-hero.size-#{$size} .select-button {
-      padding: nb-theme(select-hero-#{$size}-padding);
-      @include nb-ltr(padding-right, nb-theme(select-icon-offset));
-      @include nb-rtl(padding-left, nb-theme(select-icon-offset));
+    nb-select-with-autocomplete.appearance-hero.size-#{$size} {
+      .select-button {
+        padding: nb-theme(select-hero-#{$size}-padding);
+        @include nb-ltr(padding-right, nb-theme(select-icon-offset));
+        @include nb-rtl(padding-left, nb-theme(select-icon-offset));
+      }
+
+      .nb-form-field-prefix-#{$size},
+      .nb-form-field-suffix-#{$size} {
+        width: nb-theme(select-icon-offset);
+      }
+
+      .nb-form-field-prefix-#{$size} {
+        @include nb-ltr(margin-right, calc(#{nb-theme(select-icon-offset)} * -1));
+        @include nb-rtl(margin-left, calc(#{nb-theme(select-icon-offset)} * -1));
+      }
+
+      .nb-form-field-suffix-#{$size} {
+        @include nb-ltr(margin-left, calc(#{nb-theme(select-icon-offset)} * -1));
+        @include nb-rtl(margin-right, calc(#{nb-theme(select-icon-offset)} * -1));
+      }
+
+      [nbInput] {
+        @include nb-ltr(padding-right, nb-theme(select-icon-offset));
+        @include nb-rtl(padding-left, nb-theme(select-icon-offset));
+      }
     }
     @include form-field-theme.nb-form-field-with-prefix(
       'nb-select-with-autocomplete.appearance-hero.size-#{$size} .select-button',

diff --git a/...ramework/theme/components/select-with-autocomplete/_select-with-autocomplete-outline.scss b/...ramework/theme/components/select-with-autocomplete/_select-with-autocomplete-outline.scss
@@ -67,10 +67,32 @@
   }
 
   @each $size in nb-get-sizes() {
-    nb-select-with-autocomplete.appearance-outline.size-#{$size} .select-button {
-      padding: nb-theme(select-outline-#{$size}-padding);
-      @include nb-ltr(padding-right, nb-theme(select-icon-offset));
-      @include nb-rtl(padding-left, nb-theme(select-icon-offset));
+    nb-select-with-autocomplete.appearance-outline.size-#{$size} {
+      .select-button {
+        padding: nb-theme(select-outline-#{$size}-padding);
+        @include nb-ltr(padding-right, nb-theme(select-icon-offset));
+        @include nb-rtl(padding-left, nb-theme(select-icon-offset));
+      }
+
+      .nb-form-field-prefix-#{$size},
+      .nb-form-field-suffix-#{$size} {
+        width: nb-theme(select-icon-offset);
+      }
+
+      .nb-form-field-prefix-#{$size} {
+        @include nb-ltr(margin-right, calc(#{nb-theme(select-icon-offset)} * -1));
+        @include nb-rtl(margin-left, calc(#{nb-theme(select-icon-offset)} * -1));
+      }
+
+      .nb-form-field-suffix-#{$size} {
+        @include nb-ltr(margin-left, calc(#{nb-theme(select-icon-offset)} * -1));
+        @include nb-rtl(margin-right, calc(#{nb-theme(select-icon-offset)} * -1));
+      }
+
+      [nbInput] {
+        @include nb-ltr(padding-right, nb-theme(select-icon-offset));
+        @include nb-rtl(padding-left, nb-theme(select-icon-offset));
+      }
     }
 
     @include form-field-theme.nb-form-field-with-prefix(

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
@@ -34,6 +34,7 @@
   <input
     nbInput
     fullWidth
+    [style.max-width.px]="lastShownButtonWidth"
     #optionsAutocompleteInput
     [value]="selectionView"
     [placeholder]="placeholder"

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
@@ -448,6 +448,8 @@ export class NbSelectWithAutocompleteComponent
     return this.button.nativeElement.getBoundingClientRect().width;
   }
 
+  lastShownButtonWidth: number | undefined = undefined;
+
   get selectButtonClasses(): string[] {
     const classes = [];
 
@@ -540,6 +542,8 @@ export class NbSelectWithAutocompleteComponent
 
   show() {
     if (this.shouldShow()) {
+      this.lastShownButtonWidth = this.hostWidth;
+
       this.attachToOverlay();
 
       this.positionStrategy$