[Bug]: Autocomplete (Checkbox mode) not closing on focus out (blur) + ghost dropdown overlay + misaligned dropdown

[JaKuBisz]

Blazorise Version

1.7.2

Link to minimal reproduction or a simple code snippet

Reproducible with the official documentation sample: https://blazorise.com/docs/extensions/autocomplete#toc_Suggesting-already-selected-items----Checkbox-support

<Autocomplete TItem="Country"
              TValue="string"
              Data="@Countries"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Iso)"
              Placeholder="Search..."
              SelectionMode="AutocompleteSelectionMode.Checkbox"
              CloseOnSelection="false"
              @bind-SelectedValues="multipleSelectionData"
              @bind-SelectedTexts="multipleSelectionTexts">
</Autocomplete>

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected Values: @string.Join(',', multipleSelectionData)
    </FieldBody>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected Texts: @(multipleSelectionTexts == null ? null : string.Join(',', multipleSelectionTexts))
    </FieldBody>
</Field>

@code {
    [Inject]
    public CountryData CountryData { get; set; }
    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        multipleSelectionData = new List<string>() { Countries.ElementAt( 1 ).Iso, Countries.ElementAt( 3 ).Iso };
        await base.OnInitializedAsync();
    }

    List<string> multipleSelectionData;
    List<string> multipleSelectionTexts;
}

Steps to reproduce & bug description

1. Copy the example code from the docs (Autocomplete in Checkbox mode) or try in the Docs page.
2. Type into the field so that the dropdown menu opens.
3. Click outside the component.
4. Observe that the dropdown does not close.
5. Move the mouse over the dropdown area → it disappears but leaves an empty “dangling” ghost dropdown visible.
6. Additionally, when adding more selected items, the dropdown becomes misaligned (shifted to the side, aligning with the last selected item instead of staying aligned with the input field).

The issue is the dropdown does not close when focus is lost from the component.
When dropdown opens and then different part of page is clicked the dropdown does not close, however when a mouse is moved over the drop down menu it closes but leaves a dangling empty dropdown still visible (see the image "Dangling dropdown" in Additional comment).
Also when some items are selected the dropdown aligns with the last selected item instead of the input/search field (see image "Misaligned dropdown" in Additional comments)

What is expected?

• Dropdown should close immediately on blur (focus lost).
• No dangling ghost dropdown should remain visible.
• Dropdown should remain properly aligned under the input field when selected items are added.

What is actually happening?

• Dropdown stays open after blur.
• On mouse hover after “close”, an empty dangling dropdown overlay is still visible.
• Dropdown positioning breaks and moves away from the input field as selected items are added (see screenshot).

What browsers do you see the problem on?

Chrome, Microsoft Edge, Safari

Any additional comments?

Dangling dropdown:

Misaligned dropdown:

[stsrki]

Hello, we have been able to reproduce the issue on our end. That's why it has already been put on the 1.8 backlog to be fixed. So, for now, we have enough information to be able to fix it.

You can expect it to be fixed in the next update.

[MBNSoftware]

Hello,

I would not say that the dropdown is misaligned. After all, it's positionned just below the item currently being written in the text field, which seems a good position to me. But then the width of the dropdown should be reduced so that its width does not exceed the one of the text field.

Something like that, if possible of course and if agreed :

It's only a point of view.

Regards

[stsrki]

I don't think the menu size is a significant problem. From a UX perspective, it may be improved.

The biggest concern is that the menu stays open when the component loses focus. That issue should be fixed.

[MBNSoftware]

You're absolutely right, the issue first !
But, "while you're at it" or after the issue is fixed, any improvement is welcome ;)

Regards