fix(core): fix overriding default dropdown options (#9348)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Oct 7, 2024 · db84c4c · db84c4c
1 parent 2c7e28a
commit db84c4c
Show file tree

Hide file tree

Showing 13 changed files with 63 additions and 33 deletions.
diff --git a/projects/core/components/textfield/textfield.component.ts b/projects/core/components/textfield/textfield.component.ts
@@ -26,8 +26,8 @@ import {tuiAsDataListHost} from '@taiga-ui/core/components/data-list';
 import {TuiLabel} from '@taiga-ui/core/components/label';
 import {
     TuiDropdownDirective,
+    TuiDropdownFixed,
     tuiDropdownOpen,
-    tuiDropdownOptionsProvider,
     TuiWithDropdownOpen,
 } from '@taiga-ui/core/directives/dropdown';
 import {TuiWithIcons} from '@taiga-ui/core/directives/icons';
@@ -48,11 +48,9 @@ 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)],
     hostDirectives: [
+        TuiDropdownFixed,
         TuiDropdownDirective,
         TuiWithDropdownOpen,
         TuiWithTextfieldDropdown,

diff --git a/projects/core/directives/dropdown/dropdown-fixed.directive.ts b/projects/core/directives/dropdown/dropdown-fixed.directive.ts
@@ -0,0 +1,23 @@
+import {Directive, inject} from '@angular/core';
+import {tuiOverrideOptions} from '@taiga-ui/core/utils/miscellaneous';
+
+import {
+    TUI_DROPDOWN_DEFAULT_OPTIONS,
+    TUI_DROPDOWN_OPTIONS,
+    tuiDropdownOptionsProvider,
+} from './dropdown-options.directive';
+
+@Directive({
+    standalone: true,
+    providers: [tuiDropdownOptionsProvider({})],
+})
+export class TuiDropdownFixed {
+    constructor() {
+        const override = tuiOverrideOptions(
+            {limitWidth: 'fixed'},
+            TUI_DROPDOWN_DEFAULT_OPTIONS,
+        );
+
+        override(inject(TUI_DROPDOWN_OPTIONS, {self: true, optional: true}), null);
+    }
+}
diff --git a/projects/core/directives/dropdown/index.ts b/projects/core/directives/dropdown/index.ts
@@ -6,6 +6,7 @@ export * from './dropdown.driver';
 export * from './dropdown.providers';
 export * from './dropdown.service';
 export * from './dropdown-context.directive';
+export * from './dropdown-fixed.directive';
 export * from './dropdown-hover.directive';
 export * from './dropdown-hover.options';
 export * from './dropdown-manual.directive';

diff --git a/projects/demo/src/modules/components/textfield/examples/3/index.html b/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>
diff --git a/projects/demo/src/modules/components/textfield/examples/3/index.ts b/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,

diff --git a/projects/legacy/components/combo-box/combo-box.component.ts b/projects/legacy/components/combo-box/combo-box.component.ts
@@ -24,7 +24,7 @@ import {
     tuiAsOptionContent,
     TuiDataListDirective,
 } from '@taiga-ui/core/components/data-list';
-import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
+import {TuiDropdownFixed, TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
 import type {
     TuiSizeL,
     TuiSizeM,
@@ -40,7 +40,6 @@ import {TUI_SELECT_OPTION} from '@taiga-ui/legacy/components/select-option';
 import {TUI_TEXTFIELD_SIZE} from '@taiga-ui/legacy/directives';
 import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens';
 import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens';
-import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 
 @Component({
@@ -55,7 +54,7 @@ import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
         tuiAsControl(TuiComboBoxComponent),
         tuiAsOptionContent(TUI_SELECT_OPTION),
     ],
-    viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
+    hostDirectives: [TuiDropdownFixed],
     host: {
         '[attr.data-size]': 'size',
     },

diff --git a/projects/legacy/components/input-phone-international/input-phone-international.component.ts b/projects/legacy/components/input-phone-international/input-phone-international.component.ts
@@ -15,7 +15,7 @@ import {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous';
 import {TuiButton} from '@taiga-ui/core/components/button';
 import {TuiDataList} from '@taiga-ui/core/components/data-list';
 import {TuiAppearance} from '@taiga-ui/core/directives/appearance';
-import {TuiDropdown} from '@taiga-ui/core/directives/dropdown';
+import {TuiDropdown, TuiDropdownFixed} from '@taiga-ui/core/directives/dropdown';
 import {TuiGroup} from '@taiga-ui/core/directives/group';
 import {TuiHint} from '@taiga-ui/core/directives/hint';
 import {TuiFlagPipe} from '@taiga-ui/core/pipes/flag';
@@ -40,11 +40,7 @@ import {
 import {TuiIsoToCountryCodePipe, TuiToCountryCodePipe} from '@taiga-ui/legacy/pipes';
 import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens';
 import {TUI_COUNTRIES_MASKS, tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens';
-import {
-    FIXED_DROPDOWN_CONTROLLER_PROVIDER,
-    tuiGetMaxAllowedPhoneLength,
-    tuiIsoToCountryCode,
-} from '@taiga-ui/legacy/utils';
+import {tuiGetMaxAllowedPhoneLength, tuiIsoToCountryCode} from '@taiga-ui/legacy/utils';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
 
@@ -87,7 +83,7 @@ const MASK_SYMBOLS = /[ \-_()]/g;
         tuiAsControl(TuiInputPhoneInternationalComponent),
         TuiToCountryCodePipe,
     ],
-    viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
+    hostDirectives: [TuiDropdownFixed],
     host: {
         '[attr.data-size]': 'size',
         '(paste.capture.prevent.stop)': 'onPaste($event)',

diff --git a/projects/legacy/components/input-phone/input-phone.component.ts b/projects/legacy/components/input-phone/input-phone.component.ts
@@ -21,14 +21,13 @@ import {
     tuiAsDataListHost,
     TuiDataListDirective,
 } from '@taiga-ui/core/components/data-list';
-import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
+import {TuiDropdownFixed, TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
 import {AbstractTuiControl, tuiAsControl} from '@taiga-ui/legacy/classes';
 import {TuiPrimitiveTextfieldComponent} from '@taiga-ui/legacy/components/primitive-textfield';
 import {TUI_TEXTFIELD_CLEANER, TUI_TEXTFIELD_SIZE} from '@taiga-ui/legacy/directives';
 import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens';
 import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens';
-import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils';
 
 import {TUI_INPUT_PHONE_OPTIONS} from './input-phone.options';
 import {
@@ -53,7 +52,7 @@ function isText(value: string): boolean {
         tuiAsControl(TuiInputPhoneComponent),
         tuiAsDataListHost(TuiInputPhoneComponent),
     ],
-    viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
+    hostDirectives: [TuiDropdownFixed],
     host: {
         '[attr.data-size]': 'size',
     },

diff --git a/projects/legacy/components/input-tag/input-tag.component.ts b/projects/legacy/components/input-tag/input-tag.component.ts
@@ -31,7 +31,7 @@ import {
     TuiDataListDirective,
 } from '@taiga-ui/core/components/data-list';
 import {TuiScrollbar} from '@taiga-ui/core/components/scrollbar';
-import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
+import {TuiDropdownFixed, TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
 import {TuiHintOptionsDirective} from '@taiga-ui/core/directives/hint';
 import {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
@@ -44,7 +44,6 @@ import {
 import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens';
 import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens';
 import type {TuiStatus} from '@taiga-ui/legacy/utils';
-import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 import {timer} from 'rxjs';
@@ -75,7 +74,7 @@ const TAG_VERTICAL_SPACE_REM = 0.125;
         tuiAsDataListHost(TuiInputTagComponent),
         TEXTFIELD_CONTROLLER_PROVIDER,
     ],
-    viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
+    hostDirectives: [TuiDropdownFixed],
     host: {
         '[attr.data-size]': 'size',
         '[class._icon-start]': 'iconStart',

diff --git a/projects/legacy/components/input-time/input-time.component.ts b/projects/legacy/components/input-time/input-time.component.ts
@@ -19,6 +19,7 @@ import {tuiIsNativeFocused} from '@taiga-ui/cdk/utils/focus';
 import {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous';
 import type {TuiDataListHost} from '@taiga-ui/core/components/data-list';
 import {tuiAsDataListHost, tuiAsOptionContent} from '@taiga-ui/core/components/data-list';
+import {TuiDropdownFixed} from '@taiga-ui/core/directives/dropdown';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
 import {TUI_TIME_TEXTS, TUI_TIME_VALUE_TRANSFORMER} from '@taiga-ui/kit/tokens';
 import {AbstractTuiNullableControl, tuiAsControl} from '@taiga-ui/legacy/classes';
@@ -27,7 +28,6 @@ import {TUI_SELECT_OPTION} from '@taiga-ui/legacy/components/select-option';
 import {TUI_TEXTFIELD_SIZE} from '@taiga-ui/legacy/directives';
 import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens';
 import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens';
-import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils';
 import type {Observable} from 'rxjs';
 import {map, timer} from 'rxjs';
 
@@ -46,7 +46,7 @@ import {TUI_INPUT_TIME_OPTIONS} from './input-time.options';
         tuiAsDataListHost(TuiInputTimeComponent),
         tuiAsOptionContent(TUI_SELECT_OPTION),
     ],
-    viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
+    hostDirectives: [TuiDropdownFixed],
     host: {
         '(click)': 'onClick()',
         '[attr.data-size]': 'size',

diff --git a/projects/legacy/components/input/input.component.ts b/projects/legacy/components/input/input.component.ts
@@ -14,7 +14,7 @@ import {
     tuiAsDataListHost,
     TuiDataListDirective,
 } from '@taiga-ui/core/components/data-list';
-import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
+import {TuiDropdownFixed, TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
 import {AbstractTuiControl, tuiAsControl} from '@taiga-ui/legacy/classes';
 import {TuiPrimitiveTextfieldComponent} from '@taiga-ui/legacy/components/primitive-textfield';
@@ -24,7 +24,6 @@ import {
 } from '@taiga-ui/legacy/directives';
 import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens';
 import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens';
-import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 
 @Component({
@@ -39,7 +38,7 @@ import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
         tuiAsDataListHost(TuiInputComponent),
         tuiAsControl(TuiInputComponent),
     ],
-    viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
+    viewProviders: [TuiDropdownFixed],
     host: {
         '[attr.data-size]': 'size',
     },

diff --git a/projects/legacy/components/multi-select/multi-select.component.ts b/projects/legacy/components/multi-select/multi-select.component.ts
@@ -30,7 +30,7 @@ import {
     tuiAsDataListHost,
     TuiDataListDirective,
 } from '@taiga-ui/core/components/data-list';
-import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
+import {TuiDropdownFixed, TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
 import type {TuiSizeL, TuiSizeM, TuiSizeS} from '@taiga-ui/core/types';
 import type {TuiItemsHandlers} from '@taiga-ui/kit/tokens';
 import {TUI_ITEMS_HANDLERS} from '@taiga-ui/kit/tokens';
@@ -50,7 +50,6 @@ import {
 } from '@taiga-ui/legacy/directives';
 import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens';
 import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens';
-import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 
 import type {TuiMultiSelectOptions} from './multi-select.options';
@@ -69,7 +68,7 @@ import {AbstractTuiNativeMultiSelect} from './native-multi-select/native-multi-s
         tuiAsDataListHost(TuiMultiSelectComponent),
         TEXTFIELD_CONTROLLER_PROVIDER,
     ],
-    viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
+    hostDirectives: [TuiDropdownFixed],
     host: {
         '[attr.data-size]': 'size',
         '[class._editable]': 'editable',

diff --git a/projects/legacy/components/select/select.component.ts b/projects/legacy/components/select/select.component.ts
@@ -17,7 +17,7 @@ import {
     tuiAsOptionContent,
     TuiDataListDirective,
 } from '@taiga-ui/core/components/data-list';
-import {TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
+import {TuiDropdownFixed, TuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';
 import type {
     TuiSizeL,
     TuiSizeM,
@@ -37,7 +37,6 @@ import {TUI_SELECT_OPTION} from '@taiga-ui/legacy/components/select-option';
 import {TUI_TEXTFIELD_CLEANER, TUI_TEXTFIELD_SIZE} from '@taiga-ui/legacy/directives';
 import type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens';
 import {tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens';
-import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/legacy/utils';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 
 import type {TuiSelectOptions} from './select.options';
@@ -55,7 +54,7 @@ import {TUI_SELECT_OPTIONS} from './select.options';
         tuiAsDataListHost(TuiSelectComponent),
         tuiAsOptionContent(TUI_SELECT_OPTION),
     ],
-    viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
+    hostDirectives: [TuiDropdownFixed],
     host: {
         '[attr.data-size]': 'size',
     },