Dropdown List focus - animation delay

[Sotiris]

Greetings!

I am using the SfDropdownList control with the Bootstrap Theme in a Blazor Server app. I have noticed a delay when the user clicks in the control in order to display the popup. Using the Bootsrap theme, this appears like the control takes the focus blue border twice, like it flashes, and almost after a second the popup with the items appears.

I have attached two sample screen recordings, from your demo page (https://blazor.syncfusion.com/demos/dropdown-list/default-functionalities), one with the bootstrap theme and one with the Material theme. In the later, when the user clicks and the control takes focus, instead of the popup appearing instantly, there is an animation which displays the bottom border line growing to purple color. 

I believe that in Bootstrap, the same thing happens but without any noticeble effect. Is there any way to disable this animation so the control opens instantly without that delay?

Best Regards,
Sotiris

Attachment: Captures_b55daeab.rar

[Yohapuja Selvakumaran]

Hi Sotiris,

We have considered this issue "Popup is opened with some delay on dropdownlist in Bootstrap5 theme in demo page" as a bug from our end, and the fix for the issue will be included in our upcoming weekly release which is expected to be scheduled on first week of March.

 

You can now track the status of the feedback through the below link,

Feedback link: https://www.syncfusion.com/feedback/65524/popup-is-opened-with-some-delay-on-dropdownlist-in-bootstrap5-theme-in-demo-page

 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

Yohapuja S

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi Sotiris,

 

We have included the fix for the issue “Popup opens with a delay in Dropdown List when hosted” with our package version “29.1.41”. Therefore, we recommend upgrading to our latest version to resolve the current issue.

 

Rootcause:

When the DropDownList component is focused, we add styles for its active state. Due to this, before the e-input-focus class is added, the control briefly shows a blur border twice.

Sample: https://blazorplayground.syncfusion.com/VXVeXStxBONCzpaB

 

Regards,

K N Siddartha.

[Dr. Muhammad Usman Ali]

We updated the nugets to latest vesion but still there is lag on dropdown controls and menus as well. can you add some flag to skip animation stuff to make it more efficient on choice. 

[Priyanka Karthikeyan]

Hi Dr. Muhammad Usman Ali,

Thank you for the update.

The DropdownList sample has been verified using the Bootstrap 5 theme in the latest version (31.1.19). A slight delay has been observed in the appearance of the focus border upon clicking the input. Kindly confirm whether this is the reported issue.

🔗 Sample: https://blazorplayground.syncfusion.com/embed/BXVIjasrqvYbuqWt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

If the issue differs, please share a sample that reproduces the problem, along with the steps to replicate it and a video illustration. These details will assist in identifying the concern accurately and providing an appropriate resolution.

Thank you for the understanding and cooperation.

Regards,

Priyanka K