fix: validate color input and prevent invalid hex values#447
fix: validate color input and prevent invalid hex values#447surajshetty3416 merged 5 commits intofrappe:developfrom
Conversation
surajshetty3416
left a comment
surajshetty3416
left a comment
There was a problem hiding this comment.
@Vibhuti410 Instead of showing red borders for invalid value, I would suggest not letting set any invalid value (and retain the previous value) till the user set a valid value.
With this, we can also auto strip extra hashes automatically if rest of the value looks valid. This IMO will give better and intuitive UX.
|
@surajshetty3416 Thank you for your suggestion. The current logic already keeps the last valid input and doesn't apply invalid changes. I agree the changes you suggested would result in a more intuitive UX. I will look into it and try to make the required changes. |
|
@surajshetty3416 As per your suggestion I have updated the implementation to auto-strip the extra hashes if the rest of the input is valid. It also avoids applying invalid values along with visually highlighting the incorrect input with red border and retains the last valid input color. Demo:demo.1.mp4 |
|
@surajshetty3416 I have pushed an update as per your suggestion. Please let me know if this looks good or if you'd like any further changes. |
|
@Vibhuti410 I don't prefer the red outline in the inputs... as suggested previously, let's reset the input (with the old value) on blur if the user inputs an invalid value. Your other fix of trimming extra "#"s seems fine. |
updated.1.mp4Removed the red outline. When an invalid input is entered, it is not applied and the last valid color is retained. The auto-strip extra hashes logic remains unchanged. |
- Move inline handler out of the template into a dedicated handleColorUpdate method - fix formatting
|
🎉 This PR is included in version 1.22.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
2 participants
Issue:
The color input field accepted invalid values like incorrect or incomplete hex values. On pressing Enter, the invalid values were accepted without any verification feedback.
Solution:
Added validation for color input field.
Now it shows visual error if invalid values are entered.
Prevents appplying invalid hex values.
After:
After.1.mp4
Note: This PR focuses on hex and functional color formats. Support for named CSS colors (e.g 'red' , 'black') can be added as separate follow up improvement.
Closes #434