fix(core): add option to set a custom width to Combobox (#12594)

Co-authored-by: deno <[email protected]>
SAP · Oct 21, 2024 · ccb85f3 · ccb85f3
1 parent cf94fe7
commit ccb85f3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/libs/core/combobox/combobox.component.html b/libs/core/combobox/combobox.component.html
@@ -11,6 +11,7 @@
         [triggers]="triggers"
         [disabled]="disabled || readOnly"
         [maxWidth]="640"
+        [style.width]="width && '100%'"
         [closeOnOutsideClick]="closeOnOutsideClick"
     >
         <fd-popover-control>

diff --git a/libs/core/combobox/combobox.component.ts b/libs/core/combobox/combobox.component.ts
@@ -111,7 +111,8 @@ let comboboxUniqueId = 0;
     host: {
         '[class.fd-combobox-custom-class]': 'true',
         '[class.fd-combobox-input]': 'true',
-        '[class.fd-combobox-custom-class--mobile]': 'mobile'
+        '[class.fd-combobox-custom-class--mobile]': 'mobile',
+        '[style.width]': 'width'
     },
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -244,6 +245,10 @@ export class ComboboxComponent<T = any>
     @Input()
     maxHeight = '50vh';
 
+    /** Custom width of the control. */
+    @Input()
+    width: Nullable<string>;
+
     /** Search function to execute when the Enter key is pressed on the main input. */
     @Input()
     searchFn: () => void;

diff --git a/libs/docs/core/combobox/examples/combobox-example.component.html b/libs/docs/core/combobox/examples/combobox-example.component.html
@@ -1,10 +1,11 @@
 <div class="examples-column">
     <div fd-form-item>
-        <label fd-form-label for="comboboxID1">Standard</label>
+        <label fd-form-label for="comboboxID1">Standard with custom width</label>
         <fd-combobox
             inputId="comboboxID1"
             ariaLabel="Standard"
             maxHeight="250px"
+            width="300px"
             placeholder="Type some text..."
             [dropdownValues]="fruits"
             [(ngModel)]="searchTermOne"
@@ -87,4 +88,18 @@
         </fd-combobox>
     </div>
     <small>Search Term: {{ searchTermSix }}</small>
+
+    <div fd-form-item>
+        <label fd-form-label for="comboboxID1">Standard</label>
+        <fd-combobox
+            inputId="comboboxID1"
+            ariaLabel="Standard"
+            maxHeight="250px"
+            placeholder="Type some text..."
+            [dropdownValues]="fruits"
+            [(ngModel)]="searchTermOne"
+        >
+        </fd-combobox>
+    </div>
+    <small>Search Term: {{ searchTermOne }}</small>
 </div>