Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FluentDesignTheme custom color not honored and assertion failure #1160

Closed
kzu opened this issue Dec 19, 2023 · 8 comments
Closed

FluentDesignTheme custom color not honored and assertion failure #1160

kzu opened this issue Dec 19, 2023 · 8 comments

Comments

@kzu
Copy link

kzu commented Dec 19, 2023 •
edited
Loading

🐛 Bug Report

Three simultaneous issues that might be related happen with this setup:

  1. The CustomColor is not honored and is effectively as if it was not present
  2. Changing the mode causes an assertion failure
  3. Upon navigating, the design theme does not restore the mode changed in 2) and reverts to the default (system-dark in my case).

Given a body with

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

and a layout with:

<FluentLayout>
    <FluentHeader>
        <a href="/">
            <FluentIcon Value="@(new Icons.Regular.Size20.Home())" Color="Color.Fill" />
        </a>
        <FluentSpacer />
        <ThemeToggler />
    </FluentHeader>
    <FluentBodyContent>
        <div class="content">
            @Body
        </div>
    </FluentBodyContent>
</FluentLayout>

with a theme toggler component:

@rendermode InteractiveAuto

<FluentDesignTheme @bind-Mode="@Mode"
                   CustomColor="#682079"
                   OnLuminanceChanged="@OnLuminanceChanged"
                   StorageName="myapp" />

<FluentButton Appearance="Appearance.Stealth" OnClick="OnToggleLuminance">
    <FluentIcon Value="@(new Icons.Regular.Size20.DarkTheme())" Color="Color.Neutral" Title="Mode" />
</FluentButton>

@code {
    bool isDark = false;

    public DesignThemeModes Mode { get; set; }
    public bool IsDark => Mode == DesignThemeModes.Dark || (Mode == DesignThemeModes.System && isDark);

    void OnLuminanceChanged(LuminanceChangedEventArgs e)
    {
        if (Mode != e.Mode)
            Mode = e.Mode;

        isDark = e.IsDark;
        StateHasChanged();
    }

    void OnToggleLuminance()
    {
        if (IsDark)
            Mode = DesignThemeModes.Light;
        else
            Mode = DesignThemeModes.Dark;

        StateHasChanged();
    }
}

When the page loads, the custom color is not applied and instead you see the default office color:

image

After clicking the toggler a few times to exercise the toggling (it works fine), hit F5 (or Ctrl+F5 for a full browser refresh).

Now clicking the toggler causes the following error in the browser dev tools:

blazor.web.js:1  Uncaught (in promise) Error: Assertion failed - heap is currently locked
    at Ar (blazor.web.js:1:157753)
    at Object.beginInvokeDotNetFromJS (blazor.web.js:1:155676)
    at y.invokeDotNetMethodAsync (blazor.web.js:1:4322)
    at S.invokeMethodAsync (blazor.web.js:1:5830)
    at As.<anonymous> (FluentDesignTheme.razor.js:7:30)
    at As.dispatchAttributeChanged (DesignTheme.ts:261:18)
    at As.attributeChangedCallback (DesignTheme.ts:213:22)
    at ve.setOrRemoveAttributeOrProperty (blazor.web.js:1:29027)
    at ve.applyAttribute (blazor.web.js:1:27971)
    at ve.applyEdits (blazor.web.js:1:24998)

In both cases, the custom color is never applied.

💻 Repro or Code Sample

https://github.com/kzu/fluentui-bug/tree/theme

🤔 Expected Behavior

Custom color honored at all times, and no errors on theme toggling

🐰 Workaround

Switching to @rendermode InteractiveServer removes the assertion error, so it seems to be WebAssembly-related.

🌍 Your Environment

v4.2.0 of FluentUI
@vnbaaij vnbaaij mentioned this issue Dec 19, 2023
Closed
@dvoituron
Copy link
Collaborator

dvoituron commented Dec 19, 2023 •
edited
Loading

The CustomColor is not honored and is effectively as if it was not present

This seems to be caused by StorageName trying to restore an Office color.

<FluentDesignTheme @bind-Mode="@Mode"
                   CustomColor="#682079"
                   OnLuminanceChanged="@OnLuminanceChanged"
                   StorageName="myapp" />

Deleting StorageName="myapp" will generate the correct custom color.

image

Let us to check how to solve that for the next release.

@dvoituron
Copy link
Collaborator

Changing the mode causes an assertion failure

@vnbaaij Do you know why the InteractiveServer resolves that and how to fix this problem?

@dvoituron
Copy link
Collaborator

Will be solved with the PR #1163.
In the meantime, you can remove the StorageName to fix the color and keep the Mode in Blazor.

@kzu
Copy link
Author

kzu commented Dec 20, 2023

Would be nice to get milestones associated so I can monitor the nuget public feed for the fix for the version I know will come out with it 👍

@kzu
Copy link
Author

kzu commented Dec 20, 2023 •
edited
Loading

Do you think the assertion failure and having to use InteractiveServer will be fixed too, or should that be reported separately once this is in place?

@vnbaaij
Copy link
Collaborator

vnbaaij commented Dec 20, 2023

This is in place now. V4.2.1 is on NuGet now.

During testing of Denis's fix, I did not see the assertion failure anymore, but curious to hear your experience. If you still see it, please report in a new issue. Thanks.

@StephenOTT
Copy link

StephenOTT commented Dec 20, 2023 •
edited
Loading

FYI getting similar error after adding based on the docs and using within a panel. (Even with 4.2.1)

Will create new issue to document.

@kzu
Copy link
Author

kzu commented Dec 20, 2023

Yeah @vnbaaij , just got latest and tried it and the error is gone. Kudos on adding OnLoaded too! Allowed me to remove more code to detect initial dark mode from the toggle button :)

@StephenOTT StephenOTT mentioned this issue Dec 21, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@kzu @vnbaaij @StephenOTT @dvoituron