fix(legacy): MultiSelect fix pristine and updateOn: blur issues (#9900

)
taiga-family · Dec 4, 2024 · d70edfb · d70edfb
1 parent b2933f4
commit d70edfb
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 16 deletions.
diff --git a/projects/legacy/classes/control.ts b/projects/legacy/classes/control.ts
@@ -56,6 +56,9 @@ export abstract class AbstractTuiControl<T>
     @Input()
     public pseudoInvalid: boolean | null = null;
 
+    // Workaround for legacy control to notify of internal change in case updateOn: 'blur' is used
+    public readonly update$ = new Subject<void>();
+
     constructor() {
         super();
 
@@ -89,6 +92,7 @@ export abstract class AbstractTuiControl<T>
 
     public set value(value: T) {
         this.updateValue(value);
+        this.update$.next();
     }
 
     public get safeCurrentValue(): T {

diff --git a/projects/legacy/components/multi-select/multi-select-group/multi-select-group.directive.ts b/projects/legacy/components/multi-select/multi-select-group/multi-select-group.directive.ts
@@ -1,4 +1,4 @@
-import {Directive, forwardRef, Optional} from '@angular/core';
+import {Directive, inject} from '@angular/core';
 import {NG_VALUE_ACCESSOR, NgControl} from '@angular/forms';
 import {EMPTY_FUNCTION} from '@taiga-ui/cdk/constants';
 import {tuiArrayToggle} from '@taiga-ui/cdk/utils/miscellaneous';
@@ -7,6 +7,7 @@ import {
     TUI_DATA_LIST_HOST,
     tuiAsOptionContent,
 } from '@taiga-ui/core/components/data-list';
+import {AbstractTuiControl} from '@taiga-ui/legacy/classes';
 import {TuiMultiSelectOptionComponent} from '@taiga-ui/legacy/components/multi-select-option';
 import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';
 
@@ -23,20 +24,25 @@ export const TUI_MULTI_SELECT_OPTION = new PolymorpheusComponent(
         tuiAsOptionContent(TUI_MULTI_SELECT_OPTION),
         {
             provide: TUI_DATA_LIST_HOST,
-            deps: [
-                NgControl,
-                [new Optional(), forwardRef(() => TuiMultiSelectComponent)],
-            ],
-            useFactory: <T>(
-                control: NgControl,
-                host: TuiDataListHost<T> | null,
-            ): TuiDataListHost<T> =>
-                host || {
-                    handleOption: (option) =>
-                        control.control?.setValue(
-                            tuiArrayToggle(control.value || [], option),
-                        ),
-                },
+            useFactory: <T>(): TuiDataListHost<T> => {
+                const multiSelect = inject(TuiMultiSelectComponent, {optional: true});
+                const {control} = inject(NgControl);
+                const host = inject(AbstractTuiControl, {optional: true});
+
+                return (
+                    multiSelect || {
+                        handleOption: (option) => {
+                            if (host) {
+                                host.value = tuiArrayToggle(host.value, option);
+                            } else {
+                                control?.setValue(
+                                    tuiArrayToggle(control.value || [], option),
+                                );
+                            }
+                        },
+                    }
+                );
+            },
         },
         {
             provide: NG_VALUE_ACCESSOR,

diff --git a/projects/legacy/components/primitive-textfield/textfield/textfield.style.less b/projects/legacy/components/primitive-textfield/textfield/textfield.style.less
@@ -12,4 +12,13 @@ textarea:host {
     :host-context(tui-text-area._ios) {
         padding-left: 0.8125rem; // compensation of unkillable padding in mobile safari
     }
+
+    :host-context(tui-textarea[data-size='s']),
+    :host-context(tui-textarea[data-size='m']) {
+        font: var(--tui-font-text-s);
+    }
+
+    :host-context(tui-textarea[data-size='l']) {
+        font: var(--tui-font-text-m);
+    }
 }
diff --git a/projects/legacy/components/select-option/select-option.component.ts b/projects/legacy/components/select-option/select-option.component.ts
@@ -36,7 +36,8 @@ export class TuiSelectOptionComponent<T> implements OnInit, DoCheck {
     protected readonly context =
         injectContext<TuiContext<TemplateRef<Record<string, unknown>>>>();
 
-    protected readonly selected$ = merge(
+    protected readonly selected$ = merge<unknown[]>(
+        this.abstractControl?.update$ || EMPTY,
         this.changeDetection$,
         this.control.valueChanges || EMPTY,
         tuiTypedFromEvent(this.el, 'animationstart'),