DatePicker appears in the upper left corner after clicking on the calendar icon.

[EkaterinaTikhomirova]

Bug type

Component

Component name

MudDatePicker, MudDateRangePicker

What happened?

The Date pickers appear in the upper left corner after clicking on the calendar icon and after that it appears in proper place.

P.S. difficult to reprouce locally (barely noticeable blinking), but it works for remote server.

Expected behavior

Date pickers don't blink.

Reproduction link

Reproduction steps

1. Create Blazor Server App.
2. Add MudBlazor library.
3. Add component on any page.
4. Run application.
5. Click the Calendar icon on the picker.

Relevant log output

No response

Version (bug)

6.0.16

Version (working)

No response

What browsers are you seeing the problem on?

Chrome

On what operating system are you experiencing the issue?

Windows

Pull Request

• I would like to do a Pull Request

Code of Conduct

• I agree to follow this project's Code of Conduct

[mckaragoz]

You have multiple MudThemeProvider or MudPopoverProvider. Be sure you have only one MudThemeProvider and no MudPopoverProvider (there is already a popover provider in theme provider).

[EkaterinaTikhomirova]

@mckaragoz
I pretty sure there is only MudThemeProvider. I use https://github.com/MudBlazor/MudBlazor#quick-installation-guide to start.
Here is my repo https://github.com/EkaterinaTikhomirova/MudBlazorPickerBug.

[mckaragoz]

Is it Server-side or WASM?

[EkaterinaTikhomirova]

It's Server-side

[mckaragoz]

Does it behave (blink on corner first) each time or only on first time? It sounds like caused by latency

[EkaterinaTikhomirova]

It blinks every time. And I want to emphasize that's almost imperceptibly when I run it locally. But when I deploy it on remote server (you can simulate it with ngrok) it occurs every time (see video in description).

It sounds like caused by latency

It could be but what can I do with that?

[mckaragoz]

Have two more questions

• Is it same for MudSelect, can you try it? Or its only date picker?

• Did you try to publish another server (to make sure is, it latency related or not)?

[EkaterinaTikhomirova]

1. It's not only Date picker it's also reproduced for pickers like: DateRange, Time, Color.
   MudSelect works nice.
2. Yes I've also tried to publish it on another server.

[marceloperegil]

Hi, we have the same problem on a blazor server app. Like say Ekaterina, That's almost imperceptibly when I run it locally. I have checked all the settings that have been mentioned.

[henon]

FYI @just-the-benno this one will be a hard nut to crack I think.

[Cris240591]

Hi, I have the same problem with the MudDatePicker component, it only occurs when deployed in a non-local environment using Blazor Server.

https://user-images.githubusercontent.com/42045925/195223860-00ee6019-bb5d-4370-9710-75bc52ef3551.gif

[hariywill]

I have also been experiencing this issue. After some inspection, I found the containers for MudSelect and MudDatePicker behaves differently. Maybe this is intended by the dev team, but if not hope this can help a little.

1. Before opening any popovers, the container for MudSelect is empty and present. The date picker's is not present.
2. The container for MudSelect will start off from the top-left corner of the screen and then move to its position and stays there. The date picker's will be created and start off from the top-left corner of the screen and then move to its position but it will be disposed every time that picker is closed. Then a picker with a new id will be created and repeat the above.

[henon]

Maybe there is a way to prevent this bug by starting the popover with display:none and set it to display:default after the popup is opened. Sadly I currently lack the time to go down this rabbit hole.

[marceloperegil]

we solved it (temporary) adding this css:
.mud-popover { animation: cssAnimation 0s 0.2s forwards; visibility: hidden; }
@@keyframes cssAnimation { to { visibility: visible; } }