ColorPicker goes transparant when no value is entered into ColorField

[xiavn]

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

[reidbarber]

Looks like when parsing the value, we're replacing #0000 (the default value) with #00000000, which sets the alpha channel to 0:

react-spectrum/packages/@react-stately/color/src/Color.ts

Line 240 in 87d1e19

const values = (value.length < 6 ? value.replace(/[^#]/gi, '$&$&') : value).slice(1).split('');

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.

[reidbarber]

After a second look, I think the parsing #0000 to #00000000 should be expected, and we should update the default value to have a full alpha channel.