🐞 - ComboBox throws errors TypeError & ExpressionChangedAfterItHasBeenCheckedError

[nsbarsukov]

Which @taiga-ui/* package(s) are the source of the bug?

kit

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/combobox-console-errors?file=src/app/app.component.html

Is this issue blocking you?

Non-Blocking

Description

Reproduction

1. Open https://stackblitz.com/edit/combobox-console-errors?file=src/app/app.component.html
2. Click on the combobox

Error logs

See full logs of TypeError

ERROR TypeError: Class constructor ElementRef cannot be invoked without 'new'
    at new TuiElementDirective (element.directive.ts:9:9)
    at NodeInjectorFactory.TuiElementDirective_Factory [as factory] (ɵfac.js? [sm]:1:1)
    at getNodeInjectable (di.ts:636:15)
    at instantiateAllDirectives (shared.ts:1229:7)
    at createDirectivesInstances (shared.ts:556:2)
    at ɵɵelementStart (element.ts:152:3)
    at TuiDataListWrapperComponent_tui_data_list_0_button_1_Template (ɵcmp.js? [sm]:16:13)
    at executeTemplate (shared.ts:522:4)
    at renderView (shared.ts:326:6)
    at TemplateRef.createEmbeddedView (view_container_ref.ts:271:12)

See full logs of ExpressionChangedAfterItHasBeenCheckedError

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError:
Expression has changed after it was checked.
Previous value: 'undefined'.
Current value: 'listbox'.
It seems like the view has been created after its parent and its children have been dirty checked.
Has it been created in a change detection hook? Find more at https://angular.io/errors/NG0100
    at throwErrorIfNoChangesMode (errors.ts:110:5)
    at bindingUpdated (bindings.ts:85:9)
    at ɵɵattribute (interpolation.ts:18:1)
    at TuiDataListComponent_HostBindings (ɵcmp.js:0:0)
    at processHostBindingOpCodes (shared.ts:101:9)
    at refreshView (shared.ts:447:8)
    at refreshEmbeddedViews (shared.ts:1595:58)
    at refreshView (shared.ts:421:6)
    at refreshComponent (shared.ts:1646:11)
    at refreshChildComponents (shared.ts:138:3)


[...]

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError:
Expression has changed after it was checked.
Previous value for 'overscroll-behavior': 'undefined'.
Current value: 'contain'.
It seems like the view has been created after its parent and its children have been dirty checked.
Has it been created in a change detection hook? Find more at https://angular.io/errors/NG0100
    at throwErrorIfNoChangesMode (errors.ts:110:5)
    at bindingUpdated (bindings.ts:85:9)
    at checkStylingProperty (styling.ts:229:34)
    at ɵɵstyleProp (styling.ts:97:4)
    at TuiOverscrollDirective_HostBindings (ɵfac.js? [sm]:1:1)
    at processHostBindingOpCodes (shared.ts:101:9)
    at refreshView (shared.ts:447:8)
    at refreshComponent (shared.ts:1646:11)
    at refreshChildComponents (shared.ts:138:3)
    at refreshView (shared.ts:449:33) 

Angular version

14

Taiga UI version

3.3.0

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

[waterplea]

Can't seem to reproduce it on exact same code. Seems like some kind of StackBlitz only issue.

[expdts]

I get the same error, but only in the dialog box. In version up to 3, there is not error.
Example

Is this issue blocking you?
Blocking

[expdts]

Please correct the error. Because of it, it is not possible to upgrade to version 3.

[nsbarsukov]

@expdts thanks for problem's reproduction!

we will investigate this issue again.

[vladimirpotekhin]

Hi @expdts
while we're investigating the problem, you can move the variable declaration under the <ng-template> (eg ng-container). This should solve your problem until we find another solution

[expdts]

@vladimirpotekhin
Can you provide a complete example of a temporary solution? I can't avoid making a mistake.

[vladimirpotekhin]

@expdts after this change there are no errors in the repo you mentioned above

[waterplea]

Fixed in #3200 expected to come out today.