1

I'm using the latest version of MAUI and trying to create a Blazor Hybrid app.

The issue I'm facing is that I have a <select> which has some options. Whenever the window changes position, the dropdown list for the options, does not update. This means, after changing the Window position and using the <select>, the dropdown list appears somewhere it should not.

The issue is not a problem when just using Blazor WASM, it is however a problem when using a MAUI Blazor App.

A basic code example is this.

<label>Select issue showcase.</label>
<select>
    <option disabled hidden selected>Select something.</option>
    @foreach(int i in Enumerable.Range(0, 10)) 
    {
        <option>@i</option>
    }
</select>

I have tried calling StateHasChanged(), but it didn't do anything. I tried using the <InputSelect> component from Blazor, also it did not work.

However, I have noticed that whenever I click over to another window (can be anything, Visual Studio, Windows Explorer or whatever), and then try to open the dropdown list again, it now works.

Video showcasing the issue.

Alexandar May - MSFT
  • 6,536
  • 1
  • 8
  • 15
IAmDrNoLIfe
  • 86
  • 7
  • It looks like it's a potential issue for the Maui blazor, you can raise an issue [in this link](https://github.com/dotnet/maui/issues/new/choose). – Alexandar May - MSFT Aug 08 '22 at 08:13
  • I posted the issue, and found out that it's an already reported issue regarding WebView2. Link for the active issue is here: https://github.com/MicrosoftEdge/WebView2Feedback/issues/2290 So guess it's just a waiting game, for the inevitable fix to be released. – IAmDrNoLIfe Aug 08 '22 at 17:53

1 Answers1

0

You can workaround this by forcing a resize on the Maui window (this updates the select position).

In MainPage.xaml.cs we start by listening for any window changes

public MainPage()
{
    InitializeComponent();
}
#if WINDOWS
bool _foundWindow;

protected override void OnHandlerChanged()
{
    base.OnHandlerChanged();

    if (!_foundWindow)
    {
        var window = GetParentWindow();

        if ((window?.Handler?.PlatformView as MauiWinUIWindow)?.GetAppWindow() is var appWindow)
        {
            appWindow.Changed += AppWindow_Changed;
            _foundWindow = true;
        }
    }
}

Then force a small window resize every time the screen is moved.

private void AppWindow_Changed(Microsoft.UI.Windowing.AppWindow sender, Microsoft.UI.Windowing.AppWindowChangedEventArgs args)
{


    if (args.DidPositionChange)
    {
        
    


        this.WidthRequest = this.Width + 1;
        this.HeightRequest = this.Height + 1;
        this.WidthRequest = sender.Size.Width;
        this.HeightRequest = sender.Size.Height;




    }
    else if (args.DidSizeChange)
    {
        this.WidthRequest = sender.Size.Width;
        this.HeightRequest = sender.Size.Height;
    }

}

#endif

WidthRequest and HeightRequest do not change if the value is the same, hence the increment. DidSizeChange needs to be handled as the resize stops working if not included

CodeIsFree
  • 1
  • 1