question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Invalid behavior for Dialog, Modal, Panel and Tooltip components and issue with Scrolling

See original GitHub issue

Hello,

I am finding inconsistent and/or incorrect behavior with Dialog, Modal, Panel and Tooltip components, which in turn is creating issue for scrolling. BlazorFluentUI Version: I am using 5.7.5 but seeing the same behavior in 6.0.0 in the demo site. I recently migrated to 5.7.5 version and now I have started seeing these behavioral issues with above mentioned components.

Issue Description:

  • The Dialog, Modal, and Panel components are not freezing the background layer.
  • Scrollbar of the background layer is still visible when either of the components are opened.
  • This allows the background layer to be scrollable through freely while the any of the above three components are open.
  • As the scrollbar of the background layer is still visible, it overrides the visible scrollbar for Panel component when Panel component has its own scrollable content.
  • On the Tooltip component, when hovered over and after the tooltip opens, if we scroll the window, the Tooltip window/panel moves along with the mouse pointer
  • Also, there is an intermittent error with Tooltip window/panel, it gets stuck with the main window/panel layer and won’t disappear until the page/site is completely refreshed.

Components in demo site:

For comparing behaviors, please see their original counterparts i.e. react FluentUI components:

Note: I added the original counterparts to see the correct behavior but the BlazorFluentUI components were behaving correctly previously i.e. in older version, before I migrated to 5.7.5

I know this component library is now under low maintenance so I understand that the updates/fixes are going to be rare but I would really like to see this get fixed or at least get some kind of temporary work around solution for this, which I can add it on my end. I’d really appreciate it if someone can help with this issue.

Please let me know in case any additional information is needed. Thank you

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
vnbaaijcommented, Nov 12, 2021

v5,7,6 is available on NuGet now

1reaction
vnbaaijcommented, Nov 12, 2021

@makmilind You should definitely upgrade to .NET 6 as soon as possible. You will get free performance upgrade across the board and .NET 5will go out of support in about 6 months time. .NET 6 is a Long Term Support (LTS) release. If you are seeing a lot of errors, then there is something wrong in you project probably. It should be mostly backwards compatible.

I’ll see if can do a 5.7.6 release but that will definitely be the last release on .NET 5.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Material Dialog Component Scrolling Issue at ...
The reason it happans to you is that, the dialog component auto-focuses on the first input / button in your HTML content.
Read more >
Material UI - Unblock scrolling when popover is opened
I don't think the main issue with default behavior (without container being set), is disappearing scrollbar, rather than that, the scroll to the ......
Read more >
Modal | Components
Modals are streamlined, but flexible dialog prompts powered by JavaScript and CSS. They support a number of use cases from user notification to...
Read more >
Dialog
The dialog's default behavior can be changed in two ways, either globally with parameters in the <MudDialogProvider/> or pass down the DialogOptions class...
Read more >
Dialog (Modal)
An accessible modal dialog component for React. ... High-level component to render a modal dialog window over the top of the page (or...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found