[dev-v5] fix: `FluentAutocomplete` creates additional space when being used in `FluentStack` with gaps

[MarvinKlein1508]

🐛 Bug Report

When you use FluentAutocomplete within a FluentStack with Vertical orientation and a VerticalGap then the DOM will move the content below your component once the FluentAutocomplete is opening the dropdown menu.

💻 Repro or Code Sample

@page "/Debug/Test"
@layout FluentUI.Demo.Client.Layout.EmptyLayout
@using static SampleData.Olympics2024
<h3>Test</h3>


<div style="padding: 1rem;">
    <FluentStack Orientation="Orientation.Vertical" VerticalGap="10px">
        <FluentAutocomplete TOption="Country"
                            TValue="string"
                            Width="100%"
                            Label="Select countries"
                            Placeholder="Type to search..."
                            OnOptionsSearch="@OnSearchAsync"
                            OptionText="@(item => item.Name)"
                            OptionDisabled="@(e => e.Code == "au")"
                            @bind-SelectedItems="@SelectedCountries" />

        <FluentAutocomplete TOption="Country"
                            TValue="string"
                            Width="100%"
                            Label="Select countries"
                            Placeholder="Type to search..."
                            OnOptionsSearch="@OnSearchAsync"
                            OptionText="@(item => item.Name)"
                            OptionDisabled="@(e => e.Code == "au")"
                            @bind-SelectedItems="@SelectedCountries" />

        <FluentAutocomplete TOption="Country"
                            TValue="string"
                            Width="100%"
                            Label="Select countries"
                            Placeholder="Type to search..."
                            OnOptionsSearch="@OnSearchAsync"
                            OptionText="@(item => item.Name)"
                            OptionDisabled="@(e => e.Code == "au")"
                            @bind-SelectedItems="@SelectedCountries" />
    </FluentStack>

</div>

@code
{
    IEnumerable<Country> SelectedCountries { get; set; } = [];

    Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
    {
        e.Items = Countries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
                           .OrderBy(i => i.Name);

        return Task.CompletedTask;
    }
}

🤔 Expected Behavior

I expect the DOM to not move the content below.

😯 Current Behavior

2026-05-13.16-23-14.mp4

💁 Possible Solution

This can be fixed by applying Style="position: absolute;" to

fluentui-blazor/src/Core/Components/List/FluentAutocomplete.razor

Line 140 in ea3fcfd

@bind-Opened="@_isOpen">

A first test worked for me on the page, without stacking and within dialogs. But I'm not sure if this has any other negative impacts which I'm not aware of.

🔦 Context

I'm using FluentStack within EditForm to align my content accordingly.

🌍 Your Environment

• OS & Device: Windows 11 64 Bit
• Browser latest Firefox, Chrome & Edge
• latest dev-v5 branch