Allow pasting a hex color string with a leading # in a color text input (theme customization)

ux
1

(not sure this should be considered as a bug or an ux issue)

Hi,

When manipulating colors hex on your computer, you often copy-paste hex values with a leading # from your clipboard.
When pasting, for example, #1a2331 into a color text input, there is a minor issue:
First, the last character from your string #1a2331 is removed since the input is limited to six characters and #1a2331 has seven because of the #.
And after that, the # is automatically stripped from the string.
So the final value in your input after you paste it becomes: 1a233 with the missing last character 1, resulting in wrong color value.

A solution to fix this could be that the # should be removed before the number of characters from your string is checked.

To reproduce the issue, paste the string #1a2331 in any color text input from your Discourse color theme customization.

image
image793×257 14.8 KB

I’m on Windows 10 with Chrome and I’m using Discourse 2.4.0.beta7.

1 Like
2

Since I can remember the insertion of the hexadecimal codes in the Discourse palette has always been exactly as you described it. You must manually enter only the hexadecimal number and omit #

Many color pickers give you the option of copying the hexadecimal code by previously deciding the code format
image

2 Likes
3

Sure I get this, it’s just that this behavior is a bit odd. I had to check the value I was coping pasting a couple times before noticing that the last number of my string was missing in the input. I didn’t understand why the value was invalid at first and I guess this specific copy paste behavior could be improved with no drawback.

4 Likes