Dialog unable to show drop down menu correctly

[geowong2022]

Hi,

Whenever I use a FluentAutocomplete or FluentSelect, the drop down menu shows correctly in non-dialog page.

However, when I use Dialog service to show a pop up, the menu is show like this:

I notice that the transform is negative something in fluent-anchored-region:

How to temporary fix it at my end to correctly show the menu?

[dvoituron]

Hi,

Can you give us more details about the Lib version used and a sample of code?

I tried to reproduce your issue, adding this code to the Demo Dialog sample pages (SimpleCustomizedDialog.razor and SimpleDialog.razor):

@* Body *@
<FluentDialogBody>
    <FluentSelect TOption="string">
        <FluentOption>Option One</FluentOption>
        <FluentOption>Option Two</FluentOption>
        <FluentOption>Option Three</FluentOption>
        <FluentOption>Option Four</FluentOption>
        <FluentOption>Option Five</FluentOption>
    </FluentSelect>

    <FluentAutocomplete TOption="Country"
                        Label="Select a country"
                        Width="250px"
                        Height="100px"
                        Placeholder="Select countries"
                        OnOptionsSearch="@OnSearchAsync"
                        MaximumSelectedOptions="3"
                        OptionText="@(item => item.Name)"
                        @bind-SelectedOptions="@SelectedItems" />
</FluentDialogBody>

@inject DataSource Data

@code {
    IEnumerable<Country> SelectedItems = Array.Empty<Country>();

    private async Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
    {
        var allCountries = await Data.GetCountriesAsync();
        e.Items = allCountries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
                                .OrderBy(i => i.Name);
    }
}

But the result seems fine.

[geowong2022]

Hi,
The version is 3.2.2.Not sure if this is ok:

@if (Dialog != null)
{
<FluentAutocomplete TOption="xxx"
	Width="400px"
	Placeholder="Select products"
	OnOptionsSearch="@OnSearchAsync"
	MaximumSelectedOptions="1"
	OptionText="@(item => item.Product)" @bind-SelectedOptions="@selected" ValueChanged="@OnSelectedProductChanged" />
}

Dialog is:
[CascadingParameter] public FluentDialog? Dialog { get; set; }

From the parent page,

DialogParameters<xxxDialogModel> parameters = new()
	{
		PrimaryAction = null,
		SecondaryAction = null,
		Width = "1400px",
		Height = "100%",
		Content = new (data),
		TrapFocus = true,
		Modal = false,
		ShowTitle = false,
		ShowDismiss = false
	};

await DialogService.ShowDialogAsync<DetailDialog, xxxDialogModel>(parameters);

[geowong2022]

Hi @dvoituron, this is also happening to me.
I am using FluentSelect inside a FluentDataGrid, but the menu open is not above everything and I can't see the full menu.
This is happening to me also in dialog service. I am not sure if non-dialog is working or not.

[geowong2022]

Hi @dvoituron, how about this? The grid has a fluent select that cannot show a full menu. It has no FluentCard at all.

[dvoituron]

Please, one problem at a time :-)

I haven't looked at the grid yet.
What about the original question about the Dialogbox?

[geowong2022]

I can't seems to be able to reproduce it anymore after upgrading to 3.3 (from 3.2.2).
Let's close this issue for now.
I will create the grid with select issue in another thread.
Thank you for your help. @dvoituron

[dvoituron]

Could you create a GIT repo of your sample? Because I cannot reproduce your problem.

The only case where the menu is not on top of all other components is when you use a FluentCard.
But that's a known "problem" with this solution: #825 (comment)