Updating shell Tab title doesn't work via Hot Reload / code behind

BretJohnson commented 1 year ago

Description

When using Tabs in Shell and updating the Title, the updates aren't reflected in the app using Hot Reload, not until something else triggers a refresh of the page.

@YBTopaz8 mentioned this on a customer call with me, as one of the features he sees that doesn't work with Hot Reload. It happens in his full app here: https://github.com/YBTopaz8/FlowHub-MAUI and I reproduced the problem with the steps below.

Steps to Reproduce

Do File / New Project / MAUI App
Open AppShell.xaml and replace the contents with following, to create multiple FlyoutItem Tabs

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Home"
             Shell.TabBarIsVisible="True">
            <ShellContent Title="Home Page"
                          ContentTemplate="{DataTemplate local:MainPage}" />

        </Tab>

        <Tab Title="Flow Outs">
            <ShellContent Title="Manage Expenditures"
                          ContentTemplate="{DataTemplate local:MainPage}" />
        </Tab>
    </FlyoutItem>

Debug the app to use Hot Reload. I reproduced the problem on Windows, but I expect it happens on all platforms.
Note that tabs display properly
Update the tab titles, for example changing them to Home2 and Flow Outs2

Result: The tab title updates are applied in the app. However, if you navigate to a new tab to refresh the UI, you see the updates. Normally this behavior means that the property update was applied fine via Hot Reload, but there's an issue on the MAUI SDK side where it doesn't trigger the UI refresh for it. Normally, this type of problem also happens when changing the property via code behind (which does the same thing as the Hot Reload code) - I didn't actually test that to confirm, but it's the probably the case.

Link to public reproduction project repository

n/a

Version with bug

7.0.86

Last version that worked well

Unknown/Other

Affected platforms

I was not able test on other platforms

Affected platform versions

net7.0-windows10.0.19041.0, though likely all platforms are affected

Did you find any workaround?

No response

Relevant log output

No response

YBTopaz8 commented 1 year ago

Hi Bret! Thanks a lot for the mention, it was very informative talking to you!

As I read, you haven't been able to test of other platforms (yet), so I fired one of my other .NET MAUI projects on Android and tested this issue. I can report that HOT RELOAD works very very well when changing title in AppShell on ANDROID. Below is a video that can confirm what I'm saying. Each time that I press CTRL+S, the UI (shell) refreshes entirely.

I Hope this helps guide the team when tackling this issue! I can say that it seems to be an issue with Windows. Unfortunately I don't have the means to test on iOS and Mac Catalyst.

Best, Yvan Brunel

https://github.com/dotnet/maui/assets/41630728/2b7c64de-4cce-47ed-b91f-9d01d6f9033f

drasticactions commented 1 year ago

Yes, this is an MAUI bug.

The underlying WinUI Navigation item has a binding context to the abstracted MAUI control, and that is not updated until the tab view is reinvoked (so, navigating). You can replicate that with C# Code behind, and inspecting the MAUI view shows that the text was updated fine. So this is a MAUI bug.

dotnet / maui