diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts index 64178030f612..64e6108d7409 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts @@ -134,6 +134,11 @@ export default class AttributeWrapper extends BaseAttributeWrapper { let updater: Node[]; const init = this.get_init(block, value); + // Set inputs value default to '' if undefined + if (name == 'value') { + block.chunks.mount.push(b`@set_input_value(${element.var}, ${value});`); + } + if (is_legacy_input_type) { block.chunks.hydrate.push( b`@set_input_type(${element.var}, ${init});` @@ -149,6 +154,7 @@ export default class AttributeWrapper extends BaseAttributeWrapper { updater = b`@select_option(${element.var}, ${value});`; } + block.chunks.mount.push(b` ${updater} `); diff --git a/test/js/samples/input-default-value/expected.js b/test/js/samples/input-default-value/expected.js new file mode 100644 index 000000000000..4ef5925d1529 --- /dev/null +++ b/test/js/samples/input-default-value/expected.js @@ -0,0 +1,85 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + append, + detach, + element, + init, + insert, + listen, + noop, + safe_not_equal, + set_data, + set_input_value, + space, + text +} from "svelte/internal"; + +function create_fragment(ctx) { + let input; + let t0; + let h1; + let t1; + let t2; + let mounted; + let dispose; + + return { + c() { + input = element("input"); + t0 = space(); + h1 = element("h1"); + t1 = text(/*name*/ ctx[0]); + t2 = text("!"); + input.value = /*name*/ ctx[0]; + }, + m(target, anchor) { + insert(target, input, anchor); + set_input_value(input, /*name*/ ctx[0]); + insert(target, t0, anchor); + insert(target, h1, anchor); + append(h1, t1); + append(h1, t2); + + if (!mounted) { + dispose = listen(input, "input", /*onInput*/ ctx[1]); + mounted = true; + } + }, + p(ctx, [dirty]) { + if (dirty & /*name*/ 1 && input.value !== /*name*/ ctx[0]) { + input.value = /*name*/ ctx[0]; + } + + if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]); + }, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(input); + if (detaching) detach(t0); + if (detaching) detach(h1); + mounted = false; + dispose(); + } + }; +} + +function instance($$self, $$props, $$invalidate) { + let name; + + function onInput(event) { + $$invalidate(0, name = event.target.value); + } + + return [name, onInput]; +} + +class Component extends SvelteComponent { + constructor(options) { + super(); + init(this, options, instance, create_fragment, safe_not_equal, {}); + } +} + +export default Component; \ No newline at end of file diff --git a/test/js/samples/input-default-value/input.svelte b/test/js/samples/input-default-value/input.svelte new file mode 100644 index 000000000000..b31db9574048 --- /dev/null +++ b/test/js/samples/input-default-value/input.svelte @@ -0,0 +1,11 @@ + + + + +

{name}!

\ No newline at end of file diff --git a/test/js/samples/input-value/expected.js b/test/js/samples/input-value/expected.js index 2f951c9ae1c0..fefaea909c87 100644 --- a/test/js/samples/input-value/expected.js +++ b/test/js/samples/input-value/expected.js @@ -12,6 +12,7 @@ import { run_all, safe_not_equal, set_data, + set_input_value, space, text } from "svelte/internal"; @@ -169,6 +170,7 @@ function create_fragment(ctx) { }, m(target, anchor) { insert(target, input0, anchor); + set_input_value(input0, /*name*/ ctx[0]); insert(target, t0, anchor); insert(target, input1, anchor); insert(target, t1, anchor); diff --git a/test/js/samples/select-dynamic-value/expected.js b/test/js/samples/select-dynamic-value/expected.js index cd1ab1d81242..a268b227f490 100644 --- a/test/js/samples/select-dynamic-value/expected.js +++ b/test/js/samples/select-dynamic-value/expected.js @@ -8,7 +8,8 @@ import { insert, noop, safe_not_equal, - select_option + select_option, + set_input_value } from "svelte/internal"; function create_fragment(ctx) { @@ -31,7 +32,10 @@ function create_fragment(ctx) { m(target, anchor) { insert(target, select, anchor); append(select, option0); + set_input_value(option0, "1"); append(select, option1); + set_input_value(option1, "2"); + set_input_value(select, /*current*/ ctx[0]); select_option(select, /*current*/ ctx[0]); }, p(ctx, [dirty]) {