Skip to content

Typing quickly inside the colour picker results in an autofilled value

Tsering Paljor requested to merge 2831-color-picker-input-bug into develop

What is in this MR

This MR fixes a bug with an Element's Hex color input field. When the Page Designer types in too quickly into this field, the user sees that the same characters are duplicated, resulting in an invalid hex value.

See this Loom video to see this bug in action.

The bug is due to the input field listening to the input event. Whenever an input is detected, a request is fired to the API to update the hex value. When the request completes, the Element is updated with the new value. When there are multiple requests in quick succession, the Page Designer's key presses can sometimes conflict with the Element being updated, resulting in what looks like a weird unwanted auto-fill/complete behavior.

How to test this MR

To reproduce the problem:

  • In the latest develop, create an Element (e.g. a Text Element) and select it in the Editor.
  • In the right-hand context panel, go to the Style tab.
  • In the Background section, select the Color button, then click the input field; this should open up a color picker dialog.
  • In the Hex input field, type in some characters in quick succession, e.g. #ababab.
  • You should notice that sometimes the values are duplicated such that instead of #ababab, you see something like #aabbaab (i.e. a weird output that you didn't intend)

See Colin's Loom video for a live demo of this bug.

To test this MR, checkout this branch and repeat the steps above. You should no longer see the auto-fill/duplicated output behavior.

Merge Request Checklist

  • A changelog entry has been created if required.
  • New/updated Premium/Enterprise features are separated correctly in the premium or enterprise folder
  • The latest Chrome and Firefox have been used to test any new frontend features
  • Documentation has been updated
  • Quality Standards are met
  • Performance: tables are still fast with 100k+ rows, 100+ field tables
  • The redoc API pages have been updated for any REST API changes
  • Our custom API docs are updated for changes to endpoints accessed via api tokens
  • The UI/UX has been updated following UI Style Guide

Closes #2831 (closed)

Merge request reports