fix(core): fix overriding default dropdown options

Author: vladimirpotekhin

projects/core/components/textfield/textfield.component.ts

@@ -25,6 +25,7 @@ import type {TuiDataListHost} from '@taiga-ui/core/components/data-list';
 import {tuiAsDataListHost} from '@taiga-ui/core/components/data-list';
 import {TuiLabel} from '@taiga-ui/core/components/label';
 import {
+    TUI_DROPDOWN_OPTIONS,
     TuiDropdownDirective,
     tuiDropdownOpen,
     tuiDropdownOptionsProvider,
@@ -33,6 +34,7 @@ import {
 import {TuiWithIcons} from '@taiga-ui/core/directives/icons';
 import {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
+import {tuiOverrideDefaultOptions} from '@taiga-ui/core/utils';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 
@@ -48,10 +50,7 @@ import {TuiWithTextfieldDropdown} from './textfield-dropdown.directive';
     styles: ['@import "@taiga-ui/core/styles/components/textfield.less";'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [
-        tuiAsDataListHost(TuiTextfieldComponent),
-        tuiDropdownOptionsProvider({limitWidth: 'fixed'}),
-    ],
+    providers: [tuiAsDataListHost(TuiTextfieldComponent), tuiDropdownOptionsProvider({})],
     hostDirectives: [
         TuiDropdownDirective,
         TuiWithDropdownOpen,
@@ -83,6 +82,9 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
     protected readonly control?: NgControl;
 
     protected readonly icons = inject(TUI_COMMON_ICONS);
+    protected readonly override = tuiOverrideDefaultOptions(TUI_DROPDOWN_OPTIONS, {
+        limitWidth: 'fixed',
+    });
 
     protected computedFiller = computed(() => {
         const value = this.directive?.nativeValue() || '';

projects/core/utils/miscellaneous/override-options.ts

@@ -1,3 +1,6 @@
+import type {ProviderToken} from '@angular/core';
+import {inject} from '@angular/core';
+
 export function tuiOverrideOptions<T>(
     override: Partial<T>,
     fallback: T,
@@ -13,3 +16,14 @@ export function tuiOverrideOptions<T>(
         return result;
     };
 }
+
+export function tuiOverrideDefaultOptions<T>(
+    key: ProviderToken<T>,
+    options: Partial<T>,
+): void {
+    const defaultOptions = inject(key, {self: true});
+
+    Object.keys(options).forEach((key) => {
+        (defaultOptions as Record<string, unknown>)[key] = options[key as keyof T];
+    });
+}

projects/demo/src/modules/components/textfield/examples/3/index.html

@@ -25,3 +25,20 @@
         [items]="items"
     />
 </tui-textfield>
+
+<tui-textfield
+    tuiChevron
+    tuiDropdownLimitWidth="auto"
+>
+    <label tuiLabel>Dropdown setting</label>
+    <select
+        placeholder="I am placeholder"
+        tuiTextfield
+        [(ngModel)]="value"
+    ></select>
+    <tui-icon tuiTooltip="Fixed choice select" />
+    <tui-data-list-wrapper
+        *tuiTextfieldDropdown
+        [items]="items"
+    />
+</tui-textfield>

projects/demo/src/modules/components/textfield/examples/3/index.ts

@@ -2,7 +2,7 @@ import {Component, inject} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
+import {TuiDropdownOptionsDirective, TuiIcon, TuiTextfield} from '@taiga-ui/core';
 import {
     TuiChevron,
     TuiDataListWrapper,
@@ -16,6 +16,7 @@ import {
         FormsModule,
         TuiChevron,
         TuiDataListWrapper,
+        TuiDropdownOptionsDirective,
         TuiFilterByInputPipe,
         TuiIcon,
         TuiTextfield,