Blazer Web: Mouse clicks not registering. Buttons do not respond. @onclick cannot be handled #63432
Description
This issue has been moved from a ticket on Developer Community.
[severity:I'm unable to use this version]
Attached is a zipped project example.
Steps:
- Unzip project, build, and run.
- On Home page, click the link, "Check Click" to get to the "Test Click" page.
- Click on "Click Hit", "Clear", and "<a> click". Observe that no message is in the empty input box showing that the clicks are not working
This solution was created as follows:
- Start Visual Studio Community 2022.
- Select "Create a new project".
- Select "Blazor Web App" and click Next.
- Type a project name, etc., or accept defaults for this demonstration. Click next.
- Set the configuration as follows:
a. Framework: .NET 8.0 (Long Term Support).
b. Authentication type: None.
c. Configure for HTTPS: Checked.
d. Interactive render mode: Server.
e. Interactivity location: Global.
f. Include sample pages: UNCHECKED.
g. Do not use top-level statements: unchecked.
h. Enlist in .NET Aspire orchestration: unchecked.
Click Create.
Note: UNCHECKED (all caps). The clicking seems to work in the sample page "Counter".
Original Comments
rlewis-m on 12/17/2024, 04:53 AM:
I have more information. I suspect the problem might lie in the workload-generated App.razor file.
I think it is generating the following two lines:
<Routes />
<script src="_framework/blazor.server.js"></script>
What it should generate are the following two lines:
<Routes @rendermode=“InteractiveServer” />
<script src="_framework/blazor.web.js"></script>
I suspect this might make the clicks work. But I have not tested to see whether this is the thing that makes the clicks work.
Another thing that I noticed is that these lines are missing from the <head> section:
<link rel=“icon” type=“image/png” href=“favicon.png” />
<HeadOutlet @rendermode=“InteractiveServer” />
And that could solve another problem that I did not mention. It seems that now the favicon image needs to be favicon.ico. But it used to accept favicon.png as well. That might be the <link> line.
Regarding the <HeadOutlet> line, I don’t know whether that is needed or not.
Feedback Bot on 12/17/2024, 08:27 AM:
We have directed your feedback to the appropriate engineering team for further evaluation. The team will review the feedback and notify you about the next steps.
Anonymized GDPR on 12/18/2024, 06:20 AM:
Thank you for taking the time to log this issue!
After I added the line of code @rendermode= InteractiveServer, the @OnClick functionality worked correctly. Could you try adding this line to see if it resolves your issue?
For more information, please refer to ASP.NET Core Blazor render modes | Microsoft Learn
We look forward to hearing from you!
rlewis-m on 12/18/2024, 03:30 PM:
Yes. Adding
@rendermode InteractiveServer
makes the clicks work.
In my opinion, that could be one workaround.
I just checked this. In the App.razor file, if you change
<Routes />
to
<Routes @rendermode="InteractiveServer" />
, then clicks also work. And I think this solution makes clicks work everywhere without adding
@rendermode InteractiveServer
in every file in which you want to handle click events.
Making this change could be another workaround.
I favor the workload generating the App.razor file that has
<Routes @rendermode="InteractiveServer" />
when you select
Interactivity location: Global
when creating the project.
I don’t know, but maybe the App.razor file should generate as it does with
<Routes />
when you select
Interactivity location: Per page/component.
If so, then it would be nice for the tooltips that appear when hovering over the (I) to mention adding a “@rendermode InteractiveServer” in every .razor file in which you want to handle clicks.
In any case, when I select
Interactive render mode: Server Interactivity location: Global
I would expect that the solution is generated ready to handle clicks
in every .razor file by default.
Feedback Bot on 2/14/2025, 11:02 AM:
Thank you for sharing your feedback! Our teams prioritize action on product issues with broad customer impact. See details at: https://docs.microsoft.com/en-us/visualstudio/ide/report-a-problem#faq. In case you need answers to common questions or need assisted support, be sure to use https://visualstudio.microsoft.com/vs/support/. We’ll keep you posted on any updates to this feedback.
Feedback Bot on 4/8/2025, 08:08 AM:
We detected that this issue hasn’t received a lot of activity, votes, or comments in the past 90 days. Based on this, the issues severity and affected area, it’s my experience that this issue is unlikely to get fixed. To improve the situation, consider following best practices for quality problem reports, and giving us more details on how this issue is impacting you.
rlewis-m on 4/8/2025, 01:59 PM:
I have not noticed this issue in the current Visual Studio. It seems to have been fixed in a later update.