input color displays a warning in Chrome console

[Ennoriel]

Describe the bug

When adding an input color such as:

<input type="color" value="#123456" />

there is a warning poping in the Chrome console (doing fine in Firefox):

The specified value "" does not conform to the required format.  The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.
index.mjs:582

I reported this issue because someone reported it in my library project: Ennoriel/svelte-awesome-color-picker#29

Reproduction

This is not hapenning on a REPL and has only been reproduced on a fresh SK project:

https://github.com/Ennoriel/svelte-bug-color-picker.git

Logs

index.mjs:582 The specified value "" does not conform to the required format.  The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

(anonymous)	@	index.mjs:582
(anonymous)	@	index.mjs:582
(anonymous)	@	index.mjs:531
claim_node	@	index.mjs:568
claim_element_base	@	index.mjs:574
claim_element	@	index.mjs:587
claim	@	+page.svelte:28
claim_component	@	index.mjs:1931
claim	@	root.svelte:42
claim	@	layout.svelte?v=1006474b:28
claim_component	@	index.mjs:1931
claim	@	root.svelte:41
claim	@	root.svelte:48
init	@	index.mjs:2023
Root	@	root.svelte:20
createProxiedComponent	@	svelte-hooks.js?v=1006474b:341
ProxyComponent	@	proxy.js?v=1006474b:242
Proxy<Root>	@	proxy.js?v=1006474b:349
initialize	@	client.js?v=1006474b:432
_hydrate	@	client.js?v=1006474b:1730
await in _hydrate (async)		
start	@	start.js:33
(anonymous)	@	(index):19

### System Info

```shell
System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 7.72 GB / 15.85 GB
  Binaries:
    Node: 16.19.0 - C:\Program Files\nodejs\node.EXE
    npm: 7.24.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (111.0.1661.62)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    svelte: ^3.54.0 => 3.54.0

### Severity

annoyance

[myakura]

It looks like Svelte somehow removes the value property from the input element. (in dom.ts L519)

svelte/src/runtime/internal/dom.ts

Lines 507 to 524 in d42ca04

	function claim_element_base(nodes: ChildNodeArray, name: string, attributes: { [key: string]: boolean }, create_element: (name: string) => Element | SVGElement) {
	return claim_node<Element | SVGElement>(
	nodes,
	(node: ChildNode): node is Element | SVGElement => node.nodeName === name,
	(node: Element) => {
	const remove = [];
	for (let j = 0; j < node.attributes.length; j++) {
	const attribute = node.attributes[j];
	if (!attributes[attribute.name]) {
	remove.push(attribute.name);
	}
	}
	remove.forEach(v => node.removeAttribute(v));
	return undefined;
	},
	() => create_element(name)
	);
	}

This causes the DevTools warning. <input type="color"> only accepts values in #rrggbb format and do not accept empty or null which causes validation errors.
https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color)

I guess similar warnings happen to <input type="datetime"> or some types that do not accept empty strings.

[stalkerg]

I got the same issue, even if I set the proper value for init bind.

[jprinaldi]

This is still happening with svelte@5.0.0-next.150.

It would be great if this could get fixed before Svelte 5 is released, just in case the fix requires introducing a breaking change.

[dummdidumm]

This is a false positive warning from Chrome. During hydrating the HTML that was rendered on the server, Svelte removes the value attribute because it's counting as the default value (which is not what we want). Removing the value attribute has no impact on the value property, i.e. it still has the same value. I'm not sure why Chrome still reports this as invalid, but even if it was inside an invalid state, it will be corrected right away because Svelte resets the value property afterwards just in case. There's not much we can do about this, and there's no bug here, therefore closing.

[fortserious]

In it case it helps other people: I received this warning when I was trying to reset a form with a color input in a reusable modal on close, and I was able to clear it out by invalidating the data for the form on close instead.