Skip to content

MudAutocomplete: Fix overlay#10446

Merged
henon merged 19 commits intoMudBlazor:devfrom
versile2:fix/autocompleteoverlay
Dec 17, 2024
Merged

MudAutocomplete: Fix overlay#10446
henon merged 19 commits intoMudBlazor:devfrom
versile2:fix/autocompleteoverlay

Conversation

@versile2
Copy link
Contributor

Description

Relocates MudOverlay to MudPopoverProvider, the vast majority of the time there will only be one overlay at a given time and it will not be trapped unless the user specifically wants it trapped. Previous behavior is kept for the Dialog, the Drawer, if there is Child Content, and if it is set to Absolute. Adjusted the way autocomplete opens and closes popover to match MudSelect. With this change using SectionOutlet and SectionContent there can never be more than one MudPopoverProvider, Blazor will not allow it. I marked this as a breaking change as there are lots of people who have overridden the behavior of mudautocomplete, popover, and/or overlay. This will change that behavior and location they may need to target.

Fixes #10396
Fixes #10157 without z-index oddities
Fixes #10010
Fixes #9611
Fixes #7196
Fixes #7047 (it was still broken)
Fixes #6600
Fixes #6388
Fixes #5946
Fixes #4961
Fixes #2976
Fixes #9550 (Wasn't padding, it was the way they were done differently at least it's not actually an autocomplete issue)

How Has This Been Tested?

Unit Tests still run, added additional tests to test overlay position and adjusted dozens of tests to use the new positioning as well as fixed any "Viewer" Test that had more than one MudPopoverProvider.

Type 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)
  • Documentation (fix or improvement to the website or code docs)

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 breaking change This change will require consumer code updates bug Unexpected behavior or functionality not working as intended labels Dec 14, 2024
@versile2
Copy link
Contributor Author

@danielchalmers I've started this as a draft PR before submitting it for review to others. I know you've been extra busy lately but let me know if you have time to look and it is okay to submit. Additionally this PR/Branch is live on https://Try.ArcTechOnline.Tech though you can't save snippets you can copy/paste code. I tested every Issue listed above. In addition I tested every component on every doc page that used an autocomplete, popover, or overlay.

@codecov
Copy link

codecov bot commented Dec 14, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.54%. Comparing base (25ea55f) to head (0d38199).

Additional details and impacted files
@@           Coverage Diff           @@
##              dev   #10446   +/-   ##
=======================================
  Coverage   91.53%   91.54%           
=======================================
  Files         418      418           
  Lines       13228    13231    +3     
  Branches     2539     2539           
=======================================
+ Hits        12108    12112    +4     
  Misses        547      547           
+ Partials      573      572    -1     

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

@danielchalmers
Copy link
Member

Will look soon! Quick note: it would be better if the markup wasn't duplicated inside the SectionContent and outside it

@ScarletKuro
Copy link
Member

Will look soon! Quick note: it would be better if the markup wasn't duplicated inside the SectionContent and outside it

@versile2 you can look how it was done here https://github.com/MudBlazor/MudBlazor/blob/21e9161b5f724f0295c459dae17af4a8a84e7e69/src/MudBlazor/Components/AppBar/MudAppBar.razor

@danielchalmers
Copy link
Member

@ScarletKuro 738ecdb is using tabs instead of spaces in some places

@ScarletKuro
Copy link
Member

ScarletKuro commented Dec 14, 2024

@ScarletKuro 738ecdb is using tabs instead of spaces in some places

Yeah, I'm trying to setup it now. I installed windows 11 so it seems VS is using tabs, tho on windows 10 I didn't do any special setup. Since .editorconfig should override all this, no?

@ScarletKuro
Copy link
Member

ScarletKuro commented Dec 14, 2024

@versile2
Copy link
Contributor Author

Should be ok now. It's just weird that @versile2's formatting was this off https://github.com/MudBlazor/MudBlazor/blob/c2c339757b87fc1c7a24f3a3bf9bd76c1486b289/src/MudBlazor/Components/Popover/MudPopoverProvider.razor

For some reason it would not format that file no matter what I did.

@ScarletKuro ScarletKuro requested a review from henon December 16, 2024 15:52
Copy link
Member

@danielchalmers danielchalmers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working on my end. One small note

@sonarqubecloud
Copy link

@henon henon changed the title Fix/autocompleteoverlay MudAutocomplete: Fix overlay Dec 17, 2024
@henon
Copy link
Contributor

henon commented Dec 17, 2024

@versile2 what should we advise users to do in the v8 migration guide?

@henon henon merged commit a1140e6 into MudBlazor:dev Dec 17, 2024
@ScarletKuro
Copy link
Member

@versile2 what should we advise users to do in the v8 migration guide?

Yes, what should go to the v8 migration guide?
What does this change mean for the normal user.
And if they have similar tests, what change they should do?

@Yomodo
Copy link
Contributor

Yomodo commented Dec 18, 2024

I can finally get rid of this:

// Workaround for MudMenu's submenu appears on top and not underneath.
ZIndex = new ZIndex {Popover = new ZIndex().AppBar + 1},

@versile2
Copy link
Contributor Author

versile2 commented Dec 18, 2024

@versile2 what should we advise users to do in the v8 migration guide?

Yes, what should go to the v8 migration guide? What does this change mean for the normal user. And if they have similar tests, what change they should do?

MudOverlay moved to SectionOutlet with MudPopoverProvider in all cases except Dialogs, Absolute positioned Overlays, and Overlays with child Content. Should have minimal impact unless you have previously used a workaround for Overlay positioning (often used with AutoComplete or Popovers inside of Appbar/Drawer).
Unit tests will need to render a MudPopoverProvider if they want to interact/check if the mud-overlay exists. var providerComp = Context.RenderComponent<MudPopoverProvider>(); then interact like normal.

@henon henon mentioned this pull request Dec 18, 2024
@versile2 versile2 deleted the fix/autocompleteoverlay branch December 20, 2024 14:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking change This change will require consumer code updates bug Unexpected behavior or functionality not working as intended

Projects

None yet

6 participants