MudBlazor / MudBlazor

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
http://mudblazor.com
MIT License
7.21k stars 1.18k forks source link

MudDataGrid's Date and Time filters in Dialog are below the Dialog. #8805

Open boppercr opened 3 weeks ago

boppercr commented 3 weeks ago

Bug type

Component

Component name

MudDataGrid

What happened?

I have a MudDataGrid in a MudDialog and it works fine except when I try to add a filter to a date column. The popup to select the date or the time appears below the dialog.

Expected behavior

It should appear on top of the filter popup.

Reproduction link

https://try.mudblazor.com/snippet/cuwSuyQSpEvoxOVp

Reproduction steps

  1. Open a dialog with a MudDataGrid with a Date column in it.
  2. Try to apply a filter to the date column.
  3. Profit?

Relevant log output

No response

Version (bug)

6.19.1

Version (working)

No response

What browsers are you seeing the problem on?

Chrome, Edge

On which operating systems are you experiencing the issue?

Windows

Pull Request

Code of Conduct

ScarletKuro commented 1 week ago

Hi. Dialog has higher z-index (1400) than the popover (1200), so this is totally expected. You need to change that in the MudTheme. I don't think we will flip the defaults as the same problem will appear if it will be vice versa.

boppercr commented 1 week ago

This is usually not an issue with popovers in dialogs like SelectBox, so I don't see why it should be when in the DataGrid?

ScarletKuro commented 1 week ago

This is usually not an issue with popovers in dialogs like SelectBox, so I don't see why it should be when in the DataGrid?

I think it's because it's a popover(filter panel) inside a popover(date time). I just tried a nested MudPopover inside the dialog, and the second popover had the same problem, it was behind. Which means it has nothing to do with the datagrid itself, but the popover architecture.

ScarletKuro commented 1 week ago

@henon do we declare this as bug or what? Well it's very complicated to fix, and Garderoben said in the past. Maybe if we move to this: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using It will fix things for us, but idk how flexible is this API, it's kind of new an Firefox got support for it only recently.

ScarletKuro commented 1 week ago

Same exact problem: https://github.com/MudBlazor/MudBlazor/issues/8373 so it's a duplicate issue Also here is a workaround: https://github.com/MudBlazor/MudBlazor/issues/8250#issuecomment-1968066937 And I think this is more or less similar problem but with AppBar + Popover: https://github.com/MudBlazor/MudBlazor/issues/6909

henon commented 1 week ago

It is a bug yes, but we don't have a solution at the moment as nobody wants to touch popover ;). Somehow we'd need a solution to pass a root z-index into popover. And of course some kind of cascading parameter so that parents such as the appbar can propagate their z-index to its children

Or maybe we just need different popover providers with different root z-indices and when you open the popover with the z-index you are delegated to the correct provider. Something like that