Skip to content

MudScrollManager: fix scroll lock for touch devices#7472

Merged
henon merged 1 commit intoMudBlazor:devfrom
ric-ros:feature/LockScrollMudDialog
Sep 14, 2023
Merged

MudScrollManager: fix scroll lock for touch devices#7472
henon merged 1 commit intoMudBlazor:devfrom
ric-ros:feature/LockScrollMudDialog

Conversation

@ric-ros
Copy link
Contributor

@ric-ros ric-ros commented Sep 7, 2023

LockScroll Parameter was missing for MudDialog. As seen on Material dialog, the dialog should be able to block the background.

To make it work on touch devices, mudScrollManager.js has been slightly modified.

Description

Resolves #7454
Resolves #6108

  • lockScroll in mudScrollManager.js modified to work on touch devices as well
  • added LockScroll parameter in DialogOptions for MudDialog

How Has This Been Tested?

Manually.

Example has been added in Docs.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added bug Unexpected behavior or functionality not working as intended enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library labels Sep 7, 2023
@codecov
Copy link

codecov bot commented Sep 7, 2023

Codecov Report

Patch coverage: 80.00% and project coverage change: -0.02% ⚠️

Comparison is base (06570f4) 90.61% compared to head (04399bb) 90.60%.
Report is 4 commits behind head on dev.

❗ Current head 04399bb differs from pull request most recent head 8715620. Consider uploading reports for the commit 8715620 to get more accurate results

Additional details and impacted files
@@            Coverage Diff             @@
##              dev    #7472      +/-   ##
==========================================
- Coverage   90.61%   90.60%   -0.02%     
==========================================
  Files         427      427              
  Lines       15199    15206       +7     
==========================================
+ Hits        13773    13777       +4     
- Misses       1426     1429       +3     
Files Changed Coverage Δ
...udBlazor/Components/Dialog/MudDialogInstance.razor 100.00% <ø> (ø)
...lazor/Components/Dialog/MudDialogInstance.razor.cs 82.48% <71.42%> (-0.73%) ⬇️
...c/MudBlazor/Components/Overlay/MudOverlay.razor.cs 91.89% <87.50%> (-2.40%) ⬇️

... and 4 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@ric-ros ric-ros marked this pull request as ready for review September 7, 2023 01:21
@ScarletKuro
Copy link
Member

@henon do you know if it's possible to unit test scrolling with bUnit? If yes, we definitely should ask it from author then.

@ScarletKuro
Copy link
Member

Do I understand correctly that it also solves this issues #6108? Since its mentioned in your #7454 issue

@ric-ros
Copy link
Contributor Author

ric-ros commented Sep 8, 2023

Do I understand correctly that it also solves this issues #6108? Since its mentioned in your #7454 issue

Yes, it does.

I've tried to write a test for that but I had few problems with it... I might need help for that

@ric-ros
Copy link
Contributor Author

ric-ros commented Sep 8, 2023

I did change the ScrollManager js calls from OnAfterRenderAsync because was calling the same multiple times.

They'll be called only if required when the value Visible change.

Is failing DebouncedTextFieldRerenderTest but I don't know why. In local it passes in 3s

@ric-ros
Copy link
Contributor Author

ric-ros commented Sep 8, 2023

I will reopen a new PR with cleaner commits.

@ric-ros ric-ros closed this Sep 8, 2023
@ric-ros ric-ros deleted the feature/LockScrollMudDialog branch September 8, 2023 07:34
@henon
Copy link
Contributor

henon commented Sep 8, 2023

The commits don't matter, in the end we'll squash everything anyway so you can as well reopen this.

As for testing, AFAIK the only way to test this is to check if the overflow css attribute is applied to the correct container. There should be Dialog tests that check similar things. You can print the html with console writeline to see the html structure that gets constructed by the test case. Does this help?

@ScarletKuro
Copy link
Member

ScarletKuro commented Sep 8, 2023

The commits don't matter, in the end we'll squash everything anyway so you can as well reopen this.

Yeah, you can commit as much as you want. There is usually no reason to open new PR since you can do with your branch whatever you want: squash, edit commit history, force push etc.

I did change the ScrollManager js calls from OnAfterRenderAsync because was calling the same multiple times.

What you just did i.e. moving the js calls from OnAfterRenderAsync to the [Parameter] is very bad practice, later it will cause problems with pre-rendering on NET8. These JS calls should be in OnAfterRenderAsync because this event is happening when the browser is attached and JS calls are possible. If multiple calls are not desirable you can use firstTime argument / local variables to check that you have already called your methods.

@ScarletKuro
Copy link
Member

ScarletKuro commented Sep 8, 2023

I did change the ScrollManager js calls from OnAfterRenderAsync because was calling the same multiple times.

What you just did i.e. moving the js calls from OnAfterRenderAsync to the [Parameter] is very bad practice, later it will cause problems with pre-rendering on NET8. These JS calls should be in OnAfterRenderAsync because this event is happening when the browser is attached and JS calls are possible. If multiple calls are not desirable you can use firstTime argument / local variables to check that you have already called your methods.

https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-7.0#prerendering
for more information

@ric-ros
Copy link
Contributor Author

ric-ros commented Sep 8, 2023

Thank you guys!
I'll change my code and I'll update you!

@ric-ros ric-ros restored the feature/LockScrollMudDialog branch September 13, 2023 02:08
@ric-ros ric-ros reopened this Sep 13, 2023
@ric-ros
Copy link
Contributor Author

ric-ros commented Sep 13, 2023

Just noticed that most of the bugs were just because of the js functions.. for now I would go easy on that to not to risk to make things worse.
Thank you for all the reviews!
Now the only files that are changed are the JS and a new rule for css. It will fix most of the overlay scrolling problems.

So far, the only one that I've noticed not working as expected is mudDrawer. Does not block anything.

@ric-ros
Copy link
Contributor Author

ric-ros commented Sep 13, 2023

Do I need to change description/PR ?

@henon
Copy link
Contributor

henon commented Sep 13, 2023

Sure, what would be a better description of the change? So you think this ready to merge?

@ric-ros
Copy link
Contributor Author

ric-ros commented Sep 13, 2023

Sure, what would be a better description of the change?

Is basically a small enhancement on the javascript functions "lockScroll" and "unlockScroll".
Everything that was working before now is working also for touchscreen devices.
After this change, the dialog and everything that works with MudOverlay don't need to be modified to work properly.

So you think this ready to merge?

Yes, I think so.

@henon henon changed the title MudDialog: LockScroll parameter in DialogOptions MudDialog: Fix scroll lock on mobile Sep 14, 2023
@henon henon removed enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library PR: needs review labels Sep 14, 2023
@henon henon changed the title MudDialog: Fix scroll lock on mobile MudScrollManager: fix scroll lock for touch devices Sep 14, 2023
@henon henon merged commit e4f916e into MudBlazor:dev Sep 14, 2023
ilovepilav pushed a commit to ilovepilav/MudBlazor that referenced this pull request Nov 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Unexpected behavior or functionality not working as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add LockScroll parameter for MudDialog ScrollLock not working on mobile

3 participants