Alpha-enabled color-picker component doesn't run onChangeComplete when changed from the form

[abaicus]

Describe the bug
Alpha-enabled color-picker doesn't always run onChangeComplete function.

To reproduce
Steps to reproduce the behavior:

1. Go to the storybook for the Alpha-enabled Color Picker or insert a ColorPicker component inside React with alpha enabled.
2. Click on the Change color format button until you land on any other form than the Hexadecimal one.
3. If you change any of the values inside the form, the onChangeComplete function never runs.

Expected behavior:
onChangeComplete should be run when changing anything inside the form.

Editor version:

• WordPress version: 5.5.1
• Gutenberg Plugin
• Version 9.2.2 - Latest from the master branch on this repository

Desktop:

• OS: Ubuntu
• Browser Chrome
• Version 86.0.4240.75

[talldan]

From a quick look, the way debounce is called for onChangeComplete doesn't look right:

gutenberg/packages/components/src/color-picker/index.js

Lines 127 to 142 in 40a5502

	commitValues( data ) {
	const { oldHue, onChangeComplete = noop } = this.props;
	if ( isValidColor( data ) ) {
	const colors = colorToState( data, data.h || oldHue );
	this.setState(
	{
	...colors,
	draftHex: toLowerCase( colors.hex ),
	draftHsl: colors.hsl,
	draftRgb: colors.rgb,
	},
	debounce( partial( onChangeComplete, colors ), 100 )
	);
	}
	}

Every time commitValues is called a new debounced function is created.

Instead the debounced function should be created in a constructor (if onChangeComplete is defined) and also in a lifecycle function like componentDidUpdate if the onChangeComplete callback changes.

Might be prudent to refactor it to a function component though and take advantage of effects.

[mirka]

This should be fixed now, as seen in the current Storybook.