Input is marked as invalid for inital null value

[MarkusKramer]

It seems Svelte 3.23.0 introduced a regression. When binding a variable that is initially null to a text input, the input is now marked as an invalid (I'm on Firefox 83.0).

Working example:
https://svelte.dev/repl/f1f2bf4c50cf4a75ba6ea38c3390af5b?version=3.22.3

Not working:
https://svelte.dev/repl/f1f2bf4c50cf4a75ba6ea38c3390af5b?version=3.31.0

[Ennoriel]

It is all the same with Chrome. The only difference is the default invalid styles on Chrome and Firefox. If you add a styling to your REPL like so:

input:invalid {
	box-shadow : 0 0 5px 1px red;  
}

In Chrome, the result is the same on both the version 3.23.3 and 3.31.0: all inputs are marked as invalid on load.

[danphil]

Still happening on Firefox 86 and Svelte 3.34.0. I've been working around this for a while by resetting the form after mount, as seen in this REPL

Note: this doesn't help with forms that are initially populated on some inputs as the reset will clear the data

Seems to be related to #3569, #4849, etc with commits 081f7cd and d8fb0bb

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[DmitryMyadzelets]

I've uncounted such behavior in Svelte v3.44.2 (see comment)

The root of the problem is that Svelte uses the same function set_input_value for both initialization and update.

I'd separate initialization code from update, since it requires different behavior. The initial value is undefined in most cases, so on mounting something like this could be more appropriate instead of the current unconditional setting:

function init_input_value(input, value) {
  if (value !== undefined) {
    set_input_value(input, value)
  }
}

In my current project to avoid marking required inputs marked as invalid I've changed the existing function as follows:

// node_modules/svelte/internal/index.mjs
function set_input_value(input, value) {
    if (value != undefined) {
        input.value = value == null ? '' : value;
    }
}

Obviously, in this case you shouldn't update the value to undefined explicitly, as it would have no effect.