tui-data-list-wrapper closes when new data is fetched

[vytautas-pranskunas-]

I ment tuiDropdown closes :)

Hi,

recently i got suggestion from you guys on how to implement dropdown

<label tuiLabel>{{ label() }}</label>
<tui-textfield tuiChevron [open]="open()" (click)="openChange(!open())">
    <input tuiTextfield [ngModel]="value()?.label" (ngModelChange)="onInputChange($event)" />
    <tui-data-list-wrapper
        *tuiTextfieldDropdown
        (itemClick)="onSelect($event)"
        [items]="itemLabels() | tuiFilterByInput"
    />
</tui-textfield>

and it works fine however i want to laod data dynamically upo open. For this i have this peace of code

 openChange(open: boolean): void {
        if (this.open() === open) {
            return;
        }

        if (!open) {
            this.open.set(open);
            this.onClose.emit();
            return;
        }

       
            this.open.set(open);
            this.onOpen.emit();

}

however with this, it starts to open (i see animation) but when new data is loaded and items changed, dropdown closes.
I am not sure why it closes (i am not changing prop open. From my point of view items inside opened dropdown should change.

I was trying to add observable behaviour like this

if (!this.isDataReady()) {
            this.open.set(open);
            this.onOpen.emit();
            return;
        }

        this.onOpen.emit();

        this.isDataReady()!
            .pipe(take(1))
            .subscribe(() => {
                setTimeout(() => {
                    this.open.set(open);
                });
            }); 

where isDataReady is firing after data is fetched and i was hoping that one tick would be enough to render it. However same thing is happening unless i wait in setTimeout roughly 2000ms before setting open signal.

Maybe there is some builtin observable awaiter or some prop that forces dropdown to stay opened no amtter waht?

if i could understand the cause of it close behaviour, it would be easier for me to solve this.

p.s. i think this is somehow is related with tuiDropdpown it self.. its slowlines.. because after receiveing data, data is immediatly printed with {{ itemLabels() | json }} however i am able 3 times click on dopdown arraw before it opens. 2 times dropdown does not react at all!

[waterplea]

Please make a Stackblitz to investigate

[vytautas-pranskunas-]

this is sample code

readonly response$ = this.request$.pipe(
        distinctUntilChanged(),
        switchMap(
            (searchText) =>
                this.http
                    .post(
                        environment.apiUrl + apiPaths.locations.addressSearch,    { searchText },
                        { observe: 'response' },
                    )
                    .pipe(
                        startWith(null),
                        map((data) => data?.body as SelectItem[]),
                    ),

            /*  this.webApi
                    .post<AddressSearchRequest, SelectItem[]>(apiPaths.locations.addressSearch, {
                        searchText,
                    })
                    .pipe(startWith(null)), */
            /*  of(this.databaseMockData.filter((user) => user.label.toLocaleLowerCase().indexOf(searchText.toLocaleLowerCase()) > -1)).pipe(
                delay(Math.random() * 1000 + 500),
                startWith(null),
            ), */
        ),
        takeUntilDestroyed(this.destroyRef),
        shareReplay({ bufferSize: 1, refCount: true }),
    );

when simulating locally with of it stays open. With $http call - it closes

[waterplea]

It's really hard to say what could cause that without reproduction. As a workaround, you can try fetching data before opening the dropdown, for example, using @let if you are on latest Angular, or @if(data(); as data)

[vytautas-pranskunas-]

ok, i was managed to solve that while creating stackblitz bit by bit. Closing

[vytautas-pranskunas-]

p.s. very interesting. dropdown was closin by http interceptor which evenyually was hiding spinner with spinner.hide()
but interesting part is that your ngx-spinner somehow was interacting with your dropdown.... i did not dig deaper but since i know the cause i was able to fix it.

const spinner = inject(NgxSpinnerService);
spinner.hide();

[waterplea]

Our dropdowns are closed via mousedown and focus interactions, perhaps it was doing something with focus:
https://angularindepth.com/posts/1479/tracking-user-interaction-area