search

chanan / BlazorStrap

Bootstrap 4 Components for Blazor Framework
https://blazorstrap.io
The Unlicense
920 stars 157 forks source link

Modal Fade show not working still persist in 5.2.101 version. #618

Closed vnooli closed 2 months ago

vnooli commented 2 months ago

Issue still persist in latest stable version. Originally posted by @vnooli in https://github.com/chanan/BlazorStrap/issues/603#issuecomment-2367630921

jbomhold3 commented 2 months ago

The most likely cause is that I need to give the transition more time to complete before changing the state. I will fix this in the next release.

jbomhold3 commented 2 months ago

Never mind, it happens when clicking close inside the modal. Hitting escape or clicking the backdrop, the fade-out effect is applied.

vnooli commented 2 months ago

@jbomhold3 Thanks for the update, handled using background color for modal.

jbomhold3 commented 2 months ago

The issue was that clicking a button/link causes a state change. This seems to refresh the element reference/element just enough to stop waiting for the transition to end. Transition end times with a single call by the component were about 340-ish ms. When a double render happened, it would always be around 150ms.

The clean way I could resolve it might have breaking changes for anyone using BSLink or BSButton and might not fix the issue anyway if HideAsync was called by anything other than the two. So, instead, it was resolved with an extra 150 ms delay after the transition end event. It's not what I would prefer, but it works.

Notes to anyone who might want to try a PR to address this better. The default animation closing takes about 340-ish ms to get back to Blazer locally. So, at max closing, it will hold the 150 ms longer than normal. But in testing, unless you click the close button or hit escape, it's about equal.

I added the ability for the wait function to accept an action. That way, I could make sure that the event handler was watched before triggering a transition. It didn't have an effect, so I added a way to send that extra delay.

I also tried adding bools to control flow a little better when getting an extra rerender from other child components. However, due to how quickly they come in, the locking bools would still be in their unlocked state.

Other ways to fix this would have included controlling the render manually again, but that can lead to unintended rendering issues. I don't see the extra time being an issue for most people. Since it only differs from what it should have been by +/- 50ms

I also tried to key the element. That said, I still think the main cause is a slight change or interruption in the element reference or the element itself that breaks out of the transition during the child component render.