Dropdown automatically closes when value is set

[hwmetzger]

I am using Angular 16 and this is my template...

<select2
[id]="'select2'"
name="select2"
class="form-control"
[data]="getSelect2Data(dbData$ | async)"
[value]="selectedValue"
(update)="updateSelect2($event)"
[styleMode]="'noStyle'"
(close)="onClose($event)"
/>

If selectedValue is null, I can click the dropdown and select an option as expected.
However, if selectedValue is not null, when I click the dropdown flashes then immediately triggers the close event and closes.

[noobcoder15]

I have the same problem and it makes the whole library useless for me. Any solution?

[majora2007]

I'm in the same boat, I just updated from 14.0.1 and noticed this change of behavior. I didn't see anything in the changelog about this behavior change.

Reproducible here:
url
User/Pass: demo/demopassword

You can open this dropdown to experience:

<select2 [data]="opts"
                                 formControlName="filterValue"
                                 [hideSelectedItems]="true"
                                 [multiple]="MultipleDropdownAllowed"
                                 [infiniteScroll]="true"
                                 [resettable]="true">
                        </select2>

[Zefling]

Probably the same bug as #89 ? I have to find the time to correct this regression which must have appeared when switching to signal. Any help will be welcome.

[Zefling]

I fixed an init issue with formControl. Does this work? @majora2007

[majora2007]

I fixed an init issue with formControl. Does this work? @majora2007

I just tested on the version you pushed and unfortunately, the dropdown still closes.

[Zefling]

Are you a minimal test case to reproduce this?

[majora2007]

I can work on that today. I have 2 more issues to do this morning then I can work on that.

[majora2007]

Sorry it took so long. Got caught up on one bug for way too long.

https://stackblitz.com/edit/stackblitz-starters-wxop941e?file=src%2Fapp.component.ts

[Zefling]

Are you sure? With version 17.2.2 it works.
https://stackblitz.com/edit/stackblitz-starters-pu8c2cqh?file=package.json

[majora2007]

I'm sure. You need to use my shared link. Notice the markup. Using multi-select mode, the dropdown is closing. I moved it to 17.2.2 and it's still reoccuring. The link you shared does not have the correct markup on the component to trigger the bug.

https://stackblitz.com/edit/stackblitz-starters-wxop941e?file=package.json

[Zefling]

Ok, I thought it was when opening, but it's when selecting with hideSelectedItems enabled that causes the problem. This happens every time an item is clicked, it is indeed not normal for the dropdown to close.

I'll see how to fix that.

[Zefling]

I fix hideSelectedItems on the 17.2.3. @majora2007