[prakashNalla]

Description

Clearing a color's hex field turned it into #000000. CustomizePanel passed String(value || '#000000') to ColorPicker, so the empty string the field sends when you delete everything came straight back as #000000, and with maxLength={7} already used up, typing a new color did nothing. It now passes the value as it is (value ?? '').

In ColorPicker, the hex field shows what was typed, including empty and partial values, and only adds a # when there is something to add it to, so typing #fff into a cleared field doesn't become ##fff. The <input type="color"> only takes #rrggbb, so it now gets the value through normalizeHexColor() and keeps the last valid color while the text is empty or partial. The preview already falls back to the template default for an empty or partial color through normalizeColorFields().

Closes #309

How I Tested This

On npm run dev, /create/saas, Customize, Background field:

• Before: select the value and press Backspace, the field shows #000000, and typing #fff changes nothing
• After: the field is empty and the swatch keeps #0f172a. Typing #fff gives #fff with the swatch at #ffffff. Selecting and typing over a value, and deleting characters from the end, work as before

Added tests/editor/color-picker.test.ts: a cleared field renders empty, #fff and ff8800 show as typed with a #rrggbb swatch, and a partial value stays in the text field. Without the change, 2 of the 3 fail.

npm run check: 0 errors, 0 warnings. npm run test: 79 files, 1543 of 1544 pass. The one failure is agenda.test.ts ("renders valid SVG and PNG for 2, 3, and 4 sessions") hitting its 5000ms timeout, which this change doesn't touch; it passes 12/12 with --testTimeout=30000. npm run build: passes.

AI Assistance

Claude helped me w/ understand the issue

Type of Change

• Bug fix

Screenshots

N/A, nothing changes in the rendered images. The fix is how the editor's color field behaves, and the before and after are above.

Checklist

• This PR targets dev
• I was assigned the linked issue
• npm run check passes
• npm run test passes
• For a bug fix: the new test fails without my change
• Tested locally with npm run dev
• Screenshots included for visual changes
• New templates follow the Template Guidelines

[anurag629]

Thanks @prakashNalla, and nice find that CustomizePanel was the one turning an empty value into #000000. Check (0 errors), all 1553 tests and the build pass on top of dev, and in the editor clearing Background now leaves the field empty, typing #fff works and the swatch follows with #ffffff.