snehilvj / dash-mantine-components

Plotly Dash components based on Mantine React Components
https://www.dash-mantine-components.com
MIT License
577 stars 61 forks source link

DateRangePicker makes application freeze #180

Closed andresballenf closed 1 year ago

andresballenf commented 1 year ago

DateRangePicker makes application freeze if you click on inmediatly after it's render in the page

gofford commented 1 year ago

I have this same issue.

I first noticed it on a personal app so had assumed it was (possibly) a local CSS conflict. But it also happens on the native docs webapp. It's both DatePicker and DateRangePicker, and is somewhat sporadic.

I can reproduce it with 30-40% confidence by:

Video of the behaviour (happened in 3rd refresh):

https://user-images.githubusercontent.com/32452466/236429279-16e3a3ae-a2f6-48a6-ac1a-e4fa89caca9f.mov

I've been unable to track down the cause, but in a local app the locking happens 100% of the time when the DatePicker is used within a modal. I will try and find time to raise a minimal replicable example.

It's a behaviour specific to 0.12 and it didn't happen in 0.11.x

snehilvj commented 1 year ago

Thanks @andresballenf for creating this issue and @gofford for the analysis. I'm on it.

snehilvj commented 1 year ago

I'm able to reproduce this issue on the docs too but not even once in isolation.

Update: This happens when there is not enough space for the dropdown to render below the date picker input. Although by default, the dropdown should render on the top if there is not enough space below and for some reason that is not working.

Update: The issue started coming up since 0.12.0 as that's when we started using Mantine v5. Mantine v5 had replaced popper.js library for floating-ui.js for rendering the dropdowns in select, date pickers, etc. So I'm guessing the issue arises from that.

Update: HoverCard suffers from this too.

andresballenf commented 1 year ago

Hi @snehilvj thanks for investigating this. Is there any solution? Should we wait until Mantine fix it?

MireilleMedhat commented 1 year ago

Hello, we are currently facing the same issue in our app, any updates on this?

snehilvj commented 1 year ago

Hi not yet. The only way for now is to use a 0.11 release.

jbetley commented 1 year ago

Can confirm that this affects HoverCard (thank goodness I found this thread, I was pulling my hair out). Am mitigating the issue by setting the position to "bottom" and ensuring that there is always enough of a margin at the bottom of the page.

Also, It has been 3 months, any update?

snehilvj commented 1 year ago

This has been fixed in the latest 0.13 alphas.