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

fix: FluentTreeView events not called for Windows Forms, BlazorWebView component #633

Closed
hml-coder opened this issue Aug 20, 2023 · 9 comments
Closed

fix: FluentTreeView events not called for Windows Forms, BlazorWebView component #633

hml-coder opened this issue Aug 20, 2023 · 9 comments

Comments

@hml-coder
Copy link

🐛 Bug Report

No FluentTreeview events called when using Windows Forms project with BlazorWebView hosting razor component from RCL

💻 Repro or Code Sample

Manually downloaded web-components-v2.5.16.min.js but that did not resolve the issue.

The OnClick event for the FluentButton works in this environment.

I'm very new to Blazor and FluentUI so maybe I'm missing something.

<PackageReference Include="Microsoft.Fast.Components.FluentUI" Version="3.0.0-RC.1" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Notifications</title>
    <base href="/" />
    <link href="_content/Microsoft.Fast.Components.FluentUI/css/reboot.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="Hml.SysTray.Notifications.styles.css" rel="stylesheet" />
</head>

<body>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>s
        <a class="dismiss">🗙</a>
    </div>

    <script type="module" src="js/web-components-v2.5.16.min.js"></script>

    <!--<script type="module" src="_content/Microsoft.Fast.Components.FluentUI/js/web-components.min.js"></script>-->
    <!--<script type="module" src="_content/Microsoft.Fast.Components.FluentUI/js/web-components-v2.5.16.min.js"></script>-->

    <script src="_framework/blazor.webview.js"></script>

</body>
</html>

image

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

🌍 Your Environment

  • OS & Device: Windows
  • Browser : FireFox
  • .NET and FAST: net7.0-windows, 3.0.0-RC.1
@hml-coder
Copy link
Author

Attached a minimal test-case for Windows Forms, WPF, Maui and Blazor Server. All projects are using the same RCL.

FluentTreeView events are called in the Blazor Server project only. The FluentButton OnClick event is called is all projects.

FluentUIBlazorWebView.zip

@hml-coder
Copy link
Author

I cloned the repo and see that OnSelectedChange and OnExpandedChange are initialized when the component is first rendered, however, no events on the FluentTreeView are called after the initial render (added private fields for testing).

image

Replaced FluentTreeView with the web component and the same behavior. Am I missing some javascript?

<fluent-tree-view 
                  @onselectedchange=HandleOnSelectedChanged
                  @onexpandedchange=HandleOnExpandedChanged>
  Root
  <fluent-tree-item>
    Fruit
    <fluent-tree-item>Pear</fluent-tree-item>
    <fluent-tree-item>Mango</fluent-tree-item>
  </fluent-tree-item>
  <fluent-tree-item>
    Guitars
    <fluent-tree-item>Fender</fluent-tree-item>
    <fluent-tree-item>Gibson</fluent-tree-item>
  </fluent-tree-item>
  </fluent-tree-view>

<br />
<p>Current selected tree item is @currentSelected?.ToString()</p>
<p>Current expanded/collapsed tree item is @currentAffected?.ToString()</p>

@code {

    object? currentSelected;
    object? currentAffected;

    private void HandleOnExpandedChanged(object? item)
    {
        currentAffected = item;
    }

    private void HandleOnSelectedChange(object? item)
    {
        currentSelected = item;
    }
}

@vnbaaij
Copy link
Collaborator

vnbaaij commented Aug 21, 2023 •
edited
Loading

Hi Roland,

Let me try to explain what is happening. Some web components (such as the fluent-tree-view) generate custom JavaScript events when user interaction with the component takes place. These events are 'captured' on the Blazor side and become available on the Blazor components in the form of the @onselectedchange etc. This is just standard Blazor functionality as described in https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-7.0#custom-event-arguments.
As can be seen in that article, the events need to be hooked up in the afterStarted method in the JavaScript initializers

The issue is that when using the WebView the library's script does not get called so the registerCustomEventType methods do not get called which leads to the custom events not being picked up and handeled by Blazor.

I have not had time yet to find out if/how the initialization can be done when the WebView is being used.

@vnbaaij
Copy link
Collaborator

vnbaaij commented Aug 21, 2023

On the web-components script file...

Starting with version 2.4.2, we added a version part to the (automatically loaded) web components script. So it will show up, in DevTools for example
<script type="module" src="_content/Microsoft.Fast.Components.FluentUI/js/web-components-v2.5.16.min.js"></script>
Versions before will still have
<script type="module" src="_content/Microsoft.Fast.Components.FluentUI/js/web-components.min.js"></script>

In v3 we will also add this version part to the script BUT that has not been done yet for the RC1 version/package. Any newer versions will have the version appended.

Hope this clears up some confusion..,

@vnbaaij vnbaaij mentioned this issue Aug 21, 2023
Closed
@hml-coder
Copy link
Author

Thank you for explaining what's happening , Vincent. I really appreciate it.

Given that this is not specific to FluentUI, should an issue be logged with the Blazor team to investigate further?

Also, thank you for the clarification on the web components script file.

@vnbaaij
Copy link
Collaborator

vnbaaij commented Aug 21, 2023

I've already reached out internally but guess it would make sense to log an issue in the ASP.NET Core repo. Would be great if you can do that.

@vnbaaij
Copy link
Collaborator

vnbaaij commented Aug 21, 2023

Wait, I suddenly remembered we already ran into this with MAUI and, more importantly, we have a workaround!! See #404
As mentioned in that issue, an issue on the ASP.NET Core repo has already been raised. Please add to what is already described there.

@vnbaaij
Copy link
Collaborator

vnbaaij commented Aug 21, 2023

Closing this as using the workaround as described in #404 works. Confirmed it on your minimal test case included earlier

@vnbaaij vnbaaij closed this as completed Aug 21, 2023
@hml-coder
Copy link
Author

Thank you very much Vincent! Confirmed the workaround works in my environment as well.

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
2 participants
@vnbaaij @hml-coder