reidbarber
commented
4 months ago Looks like when parsing the value, we're replacing #0000 (the default value) with #00000000, which sets the alpha channel to 0:
This doesn't make much sense since #000000 will use a full alpha channel in the same function. We should update this function, or set the default value to #000000 instead of #0000.
Provide a general summary of the issue here
In your example documentation for building a Color Picker using a Color Area, Field, Swatch and Slider, if you delete the content in the Color Field so the the field is left blank and then blur the input the value gets automatically changed to "#000000", and the swatch changes to transparant in colour.
If you then try to move the slider or area selection around, the hex value is updated in the field component, but the swatch remains showing a transparant colour.
The only way to stop the swatch from being transparant is to type a value manually into the ColorField, which then causes it to update correctly.
🤔 Expected Behavior?
When the field value is set automatically to #000000 I would expect the swatch to be black not transparant, I would also expect the swatch to update correctly when the sliders are moved after such an action.
😯 Current Behavior
Color Picker incorrectly sets colour on swatch to transparant and then doesn't update correctly.
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
Go to https://react-spectrum.adobe.com/react-aria/ColorPicker.html and open the first example colour picker.
Delete the content in the colour field input and then try to change colour using the slider or colour area.
Version
1.2.0 of aria-components
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
MacOS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response