🐞 - `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?

• [X] Chrome
• [ ] Firefox
• [ ] Safari
• [ ] Edge

Which operating systems have you used?

• [X] macOS
• [ ] Windows
• [ ] Linux
• [ ] iOS
• [ ] Android