-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Description
Describe the problem
I'm building a form which is supposed to use native browser validation for the required
inputs. This works correctly for text inputs when the bound value is null
, but not for select dropdowns with a placeholder option. It appears this is because when an option value is bound to null
Svelte sets the value attribute to the string "null" rather than an empty string.
See https://svelte.dev/repl/69cfd53cafa6419e9842a3dbb6a8f5b4?version=3.55.1 for an example.
Describe the proposed solution
When an option element value is bound to null
Svelte should set the value attribute to an empty string. That way if the select element is required
the browser can natively validate that a non-null option is selected.
Alternatives considered
It is possible to work around the current behavior by binding the placeholder option to an empty string rather than null
. However, this causes problems when (for example) the bound value is sent to an API which requires it to be a nullable number or object rather than a string.
This requires additional messy code to work around (e.g. changing the client side TypeScript interface to allow empty strings in addition to the type required by the API, and then manually replacing an empty string with null
just before sending the request body to the API).
Importance
would make my life easier