fix(core): Input with DataList never shows dropdown after its 1st closing

[nsbarsukov]

Fixes #9666

Reproduction 1

1. Open https://taiga-ui.dev/v3
2. Focus search textfield
3. Enter acc
4. Press Backspace
5. Type c again

Expected behavior: dropdown is shown
Actual behavior: you will never see dropdown again

Reproduction 2

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: `my-app`,
  template: `
    <tui-root>
      <tui-input [formControl]="control">
        Enter 3 characters

        <ng-container *ngIf="control.value.length > 2">
          <tui-data-list *tuiDataList> Blah blah </tui-data-list>
        </ng-container>
      </tui-input>
    </tui-root>
  `,
})
export class AppComponent {
  readonly control = new FormControl('');
}

1. Enter any 3 characters
2. Press Backspace
3. Insert any number of additional characters

Expected behavior: dropdown is shown
Actual behavior: you will never see dropdown again

Explore more:
https://stackblitz.com/edit/input-with-datalist-v3-bug?file=src%2Fapp%2Fapp.component.ts

Why bug happens ?

Everything starts from here:

taiga-ui/projects/kit/components/input/input.template.html

Lines 1 to 5 in 7c746b6

	<tui-hosted-dropdown
	class="t-hosted"
	[canOpen]="canOpen"
	[content]="datalist || ''"
	[(open)]="open"

taiga-ui/projects/kit/components/input/input.component.ts

Lines 108 to 110 in 7c746b6

	onValueChange(value: string): void {
	this.value = value;
	this.open = true;

It means that every keystroke opens dropdown.
This method decides should it can it be opened or not

taiga-ui/projects/kit/components/input/input.component.ts

Lines 104 to 105 in 7c746b6

	get canOpen(): boolean {
	return this.interactive && !!this.datalist;

Then props drilling finishes here:

taiga-ui/projects/core/components/hosted-dropdown/hosted-dropdown.template.html

Lines 7 to 8 in ab05df0

	[tuiDropdownManual]="isOpen && canOpen"
	[tuiDropdownOpenMonitor]="isOpen && canOpen"

taiga-ui/projects/core/components/hosted-dropdown/dropdown-open-monitor.directive.ts

Lines 15 to 17 in 7c746b6

	set tuiDropdownOpenMonitor(open: boolean) {
	this.open?.update(open);
	this.hosted.updateOpen(open);

DropdownOpenMonitor should not update its host (host is controlled outside inside HostedDropdown codebase).
DropdownOpenMonitor should only update external DropdownOpen (if host decides to close dropdown) or vice versa.

Are there any other solutions ?
We could listen to openChange here and call this.cdr.detectChanges on any UPSTREAM data-flow ([open] should be recalculated after view updates are already finished).

taiga-ui/projects/kit/components/input/input.template.html

Line 5 in 7c746b6

[(open)]="open"

It is dangerous solution because it can cause ExpressionChangedAfterItHasBeenCheckedError.

[lumberjack-bot]

Pull request was closed ✔️

All saved screenshots (for current PR) were deleted 🗑️

[github-actions]

Visit the preview URL for this PR (updated for commit 51d0683):

https://taiga-ui--pr9881-fix-doc-search-bawbhf8l.web.app

_{(expires Tue, 03 Dec 2024 12:07:44 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 4b5ece1e114386f6a105425ef799091475b249eb}

[bundlemon]

BundleMon

Files updated (1)

Status	Path	Size	Limits
✅	demo/browser/runtime.(hash).js	42.07KB (+25B +0.06%)	+10%

Unchanged files (4)

Status	Path	Size	Limits
✅	demo/browser/main.(hash).js	397.73KB	+10%
✅	demo/browser/vendor.(hash).js	214.53KB	+10%
✅	demo/browser/polyfills.(hash).js	15.2KB	+10%
✅	demo/browser/styles.(hash).css	1.39KB	+10%

Total files change +35B +0.01%

Groups updated (1)

Status	Path	Size	Limits
✅	demo/browser/*..js	2.46MB (+2.05KB +0.08%)	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history