Skip to content

MudPopover: Fix z-index issues with nested popovers#10089

Merged
henon merged 8 commits intoMudBlazor:devfrom
versile2:fix/popover-overflow
Oct 27, 2024
Merged

MudPopover: Fix z-index issues with nested popovers#10089
henon merged 8 commits intoMudBlazor:devfrom
versile2:fix/popover-overflow

Conversation

@versile2
Copy link
Contributor

@versile2 versile2 commented Oct 24, 2024

Description

Removed the overflow adjustment to appbar when popover flips would have ended up underneath it. It was causing children popovers of an appbar to also be adjusted which was unintended behavior. Instead if a popover is underneath the appbar it will zindex to 1 higher than it's parent.

Wrote a javascript function to calculate popover zindex based on parent (when valid parent exists).
Currently
Popover has a parent popover
Popover is inside an appbar
Popover is the parent of a tooltip (that uses popover) (this is different than the flex problem)

There is another issue related to margins and offset that I will work on after this PR is approved/modified/etc.

I do not expect this to be a breaking change as anyone overriding the zindex already are doing so to mimic this behavior (or ignore popover problems) and this shouldn't affect that.

resolves #10026
resolves #8805
resolves #8373
resolves #8250
resolves #7634
resolves #6909
hard to test this one but I think it resolves #6806
resolves #5566 (this is such an odd scenario anyways but did help me find another quirk)
checked #5173 but it already works
resolves #5108
resolves #5074
resolves #4903
resolves #4514
resolves #8180
resolves #8173
does NOT resolve issue #2976 but it does set the zIndex so another PR down the road could resolve it without doing things in 2 places
confirmed no regression on #3046

How Has This Been Tested?

Individually checking Each and Every issue above. See video in next comment as I show most of them in it.

no, I'm unsure if there's a way to test these changes

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 docs Updates/improvements to project documentation that do not affect core library logic PR: needs review labels Oct 24, 2024
@versile2
Copy link
Contributor Author

ScreenToGif

@codecov
Copy link

codecov bot commented Oct 24, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.16%. Comparing base (77a595e) to head (7802bda).
Report is 494 commits behind head on dev.

Additional details and impacted files
@@           Coverage Diff           @@
##              dev   #10089   +/-   ##
=======================================
  Coverage   91.15%   91.16%           
=======================================
  Files         411      411           
  Lines       12466    12467    +1     
  Branches     2419     2420    +1     
=======================================
+ Hits        11364    11365    +1     
  Misses        557      557           
  Partials      545      545           

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

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ScarletKuro
Copy link
Member

This definitely needs some testing from out side as well

cc @Yomodo if you are interested to test

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.

My hero 🤩

Could you add some test viewer pages or extra parts to existing examples to make it easier to confirm the resolved issues?

@versile2
Copy link
Contributor Author

Yah I've got a bunch in queue I used but didn't push. I'll move them to a page then push them in the morning.

@versile2
Copy link
Contributor Author

Add appbartest to the components page with 3 relevant example sections and a half dozen examples. In addition to those I looked at every component page checking things to try and be sure. Please do the same and let me know if anything is off.

@ScarletKuro
Copy link
Member

I think @danielchalmers meant to add them in the MudBlazor.UnitTests.Viewer project under MudBlazor/src/MudBlazor.UnitTests.Viewer/TestComponents/Popover directory, with the Test file name in the end. Then you can startup the MudBlazor.UnitTests.Viewer project instead and use it as playground there, to not pollute the docs. Since I think it would make sense to merge it with all this test files for future.

@versile2
Copy link
Contributor Author

Done. Almost all of these are straight from the github issues just so you know.

@henon henon added the epic Multiple related tasks/issues that are summarized in one issue label Oct 25, 2024
@henon
Copy link
Contributor

henon commented Oct 25, 2024

This is an epic PR. You fixed an issue even @Garderoben and the entire team failed to fix for a long time and not for a lack of trying. We just never had the right idea how to do it. I only thought of trying cascading parameters or so, @ScarletKuro wanted to replace the entire popover library with a JS library, etc .... ;)

@henon henon added v8 and removed PR: needs review breaking change This change will require consumer code updates labels Oct 25, 2024
@henon
Copy link
Contributor

henon commented Oct 25, 2024

I do not expect this to be a breaking change as anyone overriding the zindex already are doing so to mimic this behavior (or ignore popover problems) and this shouldn't affect that.

I removed the breaking change label based on this statement. I hope that is correct.

@versile2
Copy link
Contributor Author

This is an epic PR. You fixed an issue even @Garderoben and the entire team failed to fix for a long time and not for a lack of trying. We just never had the right idea how to do it. I only thought of trying cascading parameters or so, @ScarletKuro wanted to replace the entire popover library with a JS library, etc .... ;)

Thank you. I was 10 hours in when I decided to just start commenting everything and figured out the wrong parent was being used to calculate zindex. I appreciate it.

@ScarletKuro
Copy link
Member

ScarletKuro commented Oct 27, 2024

Okay, the popover content display regression is introduced in this PR @versile2

(Doesn't display the results, however without this PR it's working fine)
popover

@ScarletKuro
Copy link
Member

We missed the "Direction and Location" problem in the docs as well.
It doesn't react when you change anchor origin and transform origin,

@ScarletKuro
Copy link
Member

To save some time, i figured that the content display problem is cause by the _popover.scss change, but the placement is because of the js change, tho I haven't figured what exact line caused it.

@versile2
Copy link
Contributor Author

Ok basically there's two types of issues. Issue
1, the popover is a child of any other item that has a higher zindex. Dialog, Overlay, Appbar, whatever. My original idea was to make exclusions for each of those but now I think I just need to do a 2nd iteration if the parent isn't a popover.
2. the popover is a child of another popover - this one I'm certain is fixed.

@danielchalmers
Copy link
Member

From the Select examples on the dev branch:

Opening upwards:

image

Off to the side:

image

https://dev.mudblazor.com/components/select#visual-playground

@versile2
Copy link
Contributor Author

Got both fixed in another branch. I'll submit when tested thoroughly.

@versile2
Copy link
Contributor Author

Wish my viewer changes were in lol

@versile2 versile2 deleted the fix/popover-overflow branch October 30, 2024 17:58
versile2 added a commit to versile2/MudBlazor that referenced this pull request Oct 31, 2024
LLauter pushed a commit to cannellamedia/MudBlazor that referenced this pull request Dec 16, 2024
@danielchalmers danielchalmers added regression Previously worked and now doesn't and removed accidental break labels Jul 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment