Binding to color input sets value of #000000 after mount

[cezaryszymanski]

Describe the bug

Hello

I found this bug when updating svelte from 5.2.7 to 5.19.8. When the value is binded to input with type color and the initial $state value is nullish then the value is changed to #000000 on mount. Before the update the value didn't change and stayed null

Reproduction

https://stackblitz.com/edit/vitejs-vite-c8kjjzku?file=src%2FApp.svelte

Logs

System Info

System:
    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1355U
    Memory: 19.40 GB / 31.04 GB
    Container: Yes
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 10.2.0 - ~/.nvm/versions/node/v20.14.0/bin/pnpm
    bun: 1.1.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 133.0.6943.53
  npmPackages:
    svelte: ^5.19.8 => 5.19.8

Severity

blocking an upgrade

[tomoam]

I also checked other types of input elements and found that the same issue occurs with radio and range.

https://svelte.dev/playground/7e56d9c6c7994ec8a7b68e3c12967529?version=5.20.2

For some input types, if a nullish value (or a invalid value for that type) is set to the value, it seems that the value will become the default value for that type.

• color
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

  Setting the value to anything that isn't a valid, fully-opaque, RGB color in hexadecimal notation will result in the value being set to #000000.

• radio
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

  If you omit the value attribute in the HTML, the submitted form data assigns the value on to the group.

• range
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

  The value is never an empty string (""). The default value is halfway between the specified minimum and maximum—unless the maximum is actually less than the minimum, in which case the default is set to the value of the min attribute.

It could probably be fixed by modifying the code around the following, but I have not yet investigated the impact.

svelte/packages/svelte/src/internal/client/dom/elements/bindings/input.js

Lines 48 to 57 in 9873443

	if (
	// If we are hydrating and the value has since changed,
	// then use the updated value from the input instead.
	(hydrating && input.defaultValue !== input.value) ||
	// If defaultValue is set, then value == defaultValue
	// TODO Svelte 6: remove input.value check and set to empty string?
	(untrack(get) == null && input.value)
	) {
	set(is_numberlike_input(input) ? to_number(input.value) : input.value);
	}