ColorPicker : Fix inconsistent HEX input clearing behavior

[dpmehta]

What?

Closes #75243

This PR ensures that the ColorPicker component consistently resets to black when its HEX input field is cleared, regardless of whether the deletion happens character by character or in a single action (e.g., selecting all and deleting).

Why?

Previously, clearing the HEX input in a single action would trigger an early return in the handleChange function because of a falsy value check. This left the previously selected color active in the picker despite the input field being empty, causing user confusion. By strictly checking for undefined, we allow the empty string to be processed, resulting in a consistent fallback to black.

How?

The logic in packages/components/src/color-picker/hex-input.tsx was modified to change the early return condition from if ( ! nextValue ) to if ( nextValue === undefined ). This ensures that empty strings (which are falsy) are passed to colord(), which handles invalid/empty strings by defaulting to black. Unit tests in packages/components/src/color-picker/test/index.tsx were also updated to reflect the additional onChange call triggered by the field clearance.

Testing Instructions

1. Open any block or component that uses the ColorPicker (e.g., a Paragraph block's text color).
2. Select a custom color from the picker.
3. Click into the HEX input field.
4. Select the entire HEX value (e.g., Cmd+A or Ctrl+A) and press Backspace or Delete.
5. Expected Result: The color picker should reset to black, and the input field should display #000000.
6. Repeat the process but delete the HEX value character by character. Verify it also resets to black.

Testing Instructions for Keyboard

1. Tab into the ColorPicker and navigate to the HEX input field.
2. Type a custom HEX code (e.g., f00).
3. Press Cmd+A (Mac) or Ctrl+A (Windows) to select the text.
4. Press Backspace.
5. Confirm the color picker updates visually to black and the input field updates to #000000.

Screenshots or screencast

Before Fix :

ColorPicker-issue.mov

After Fix :

after-fix.mov

Use of AI Tools

AI is used to draft PR description.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dpmehta <mehtadev@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: Mustafabharmal <mustafabharmal@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[mirka]

The fix looks good to me, thanks.

We'll also want a test to cover this, and also a changelog entry.

[dpmehta]

@mirka Thank you so much for review and suggestion, as per suggestion i have added relevant test case to cover this and also added CHANGELOG entry, Please have a look once 🙌.

[mirka]

Looks good, thanks!

[ciampo]

@mirka performance checks are timing out (again), do you think we can skip CI checks and force merge?

[dpmehta]

Thank you so much @mirka and @ciampo for quick reply and review, appreciate it 🙌 🙇🏻