Initial Data for Bound Required Input Fields is 'undefined'

[jambonrose]

I believe this is a bug, but it may be a request for more documentation. Apologies if I'm posting this in the wrong spot.

Two-way binding an input field causes browsers to display the text 'undefined'.

In the Two-Way Binding section of the documentation, readers are provided an example of form handling in Svelte in the REPL. In the example, the input field's initial value is 'undefined'.

I sought to work around the problem by providing default data (in this case, an empty string). Unfortunately, this causes a different problem: Firefox sets input fields to the :invalid style state when JavaScript sets the value to '' on required field, or if the string does not validate (such as with type="email"). You can see this in this REPL (you will need to use Firefox to see the error).

I believe this is a bug: I expect an undefined variable in a two-way binding scenario not to write 'undefined' to the field it is found to. Using default data is not desirable because of Firefox's behavior (leads to surprising UX). Workarounds involve losing HTML5 attributes (required and type="email") or else avoiding the two-way binding, both of which require more work on the part of the developer using Svelte.

[Rich-Harris]

Ah, interesting. When this has come up previously we've decided that setting text fields to "undefined" is a) technically the correct behaviour and b) helpful insofar as it encourages people to initialize data (which is a good practice). But Firefox's behaviour changes the equation. I think I'd be on board with not setting "undefined" values.

Question is whether we should consider this a breaking change for semver purposes, or a bugfix?

[jambonrose]

Thanks for taking a look at this.

If this was a behavior that was previously agreed upon, then I suspect this counts as a breaking change, as much as I'd rather it count as a bugfix. 😒

I'm afraid I'm missing some context here: why would one wish to enforce initial data on a form? In particular, I'm building an authentication form (and assuming a new or unrecognized user). The extra code to set the fields to '' feels unnecessary to me (as there is no intended change in browser behavior), but I am brand new to Svelte.

I really enjoying Svelte, FWIW. Thanks for putting this all together!

[Rich-Harris]

Dropped the ball on this (sorry) but adding an updated REPL link: https://svelte.dev/repl?version=3.0.0-beta.28&gist=450f0a76e46ca4b2eb38a00d1c6ca7bf

I think we'll be able to get away with calling this a bugfix (i.e. semver minor/patch) since it's hard to imagine someone relying on an <input> displaying undefined.

[Rich-Harris]

Finally fixed, in 3.9.0. Thanks!

[DmitryMyadzelets]

Please, reopen it. The issue takes place again in Svelte v3.44.2
See #3430 (comment)