Unplanned
Last Updated: 03 Apr 2024 20:07 by ADMIN
Muhammad Jamil Nawaz
Created on: 03 Apr 2024 05:04
Category: AutoCompleteBox
Type: Bug Report
0
Autocomplete Text is shaking

Hi,

We have a problem in our application, where when the user is typing the text to the input field of auto completed. After pressing "@" the text starts shaking. I tried to reproduce the same issue with online demo.

https://demos.telerik.com/aspnet-ajax/autocompletebox/examples/functionality/rendermodes/defaultcs.aspx

Use render mode Classic.

https://www.loom.com/share/1d67206ea642465d88a01606687fd042?sid=584b1dcd-c5da-45b1-80b2-8297e78d1239

In the render mode Lightweight, the text is always shaking but in the Classic render mode, when the "@" typed, the text is shaking. 

The customer reported this as production issue in our application. Please suggest the solution of this asap.

Regards,
Jamil

1 comment
ADMIN
Rumen
Posted on: 03 Apr 2024 20:07

Hi Jamil,

I converted your request for UI enhancement to a public bug report item.

Thank you for bringing this issue to our attention. We understand the inconvenience you're experiencing with the flickering text in the autocomplete feature of our application. After a detailed review, we have identified that this behavior is related to the dynamic resizing of the input box and the AJAX technology used to update the input value on each key press. Specifically, the width of the input element and the appearance of the loading panel change with every keystroke, which contributes to the visual flicker you've observed.

The flickering becomes particularly pronounced after pressing the "@" symbol. This is because the "@" symbol is wider than most characters, leading to more noticeable adjustments in the input box size. This, coupled with the AJAX technology's functioning, results in the visual flicker you've observed.

Please understand that this dynamic resizing mechanism has been a longstanding part of our application's design, intended to enhance responsiveness and usability. It has not been significantly flagged as an issue by our users over the past two decades. However, we recognize that the evolving digital landscape and user interface expectations necessitate continual updates and improvements.

To directly address the flickering issue, especially with wider characters like "@", we are currently exploring several solutions:

  • Stabilizing Input Box Sizing: We're considering strategies to minimize or eliminate the need for dynamic width adjustments, such as implementing a fixed or minimum width for the input box that can accommodate wider characters without frequent resizing.
  • Optimizing AJAX Updates: We aim to refine the AJAX update mechanism to ensure it impacts the input box's visual stability as little as possible, reducing the flickering effect.

Your feedback is invaluable in guiding our efforts to enhance our application. We are committed to resolving this issue and improving the user experience, but this will require planning and time.

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources