fix: FluentSelect with Multiple=true is always position: absolute

[davhdavh]

🐛 Bug Report

Adding a FluentSelect with Multiple=true always makes a component that uses the default .listbox, which has position: absolute.

💻 Repro or Code Sample

https://www.fluentui-blazor.net/#multipleitemswithsel remove the surrounding div (or remove the height)

🤔 Expected Behavior

It behaves like a block element

😯 Current Behavior

It's a popup on a 0 height element.

💁 Possible Solution

<FluentSelect Id="@Id" Autofocus="true" Items="Items" @bind-SelectedOptions="@SelectedEnums" OptionText="@NameFunc" Multiple="true" Placeholder="@Label" Height="300px" Immediate="true"/>
@InlineStyleValue
@code {
   private string Id = Identifier.NewId();

   private MarkupString InlineStyleValue => new InlineStyleBuilder()
                                           .AddStyle($"#{Id}::part(listbox)", "position", "relative").BuildMarkupString();
}

I personally think this is a bug, but if it was intended as such, please add a Parameter to let us set the position.

[vnbaaij]

Will be fixed in next release

[davhdavh]

It also needs to not set the z-index

[vnbaaij]

We need that for other situations

[davhdavh]

not when it is a block element... otherwise it shows over other form elements

[vnbaaij]

So only no z-index when Multiple is false?

[davhdavh]

no z-index when position is relative. the z-index is for element that are positioned absolute, so that they will render on top of other things.
In this case, when the full list is shown as a block element, such as with multiple=true, then it should also not have z-index.
When you have multiple=false, then you need the z-index because that will determine the styling of the full list once you show the full list, and that DOES need to display above other content.