Merge pull request #3871 from AlbertLucianto/fix/bind-value-fails-range-max

fix range input if max is changed at same time as value

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -351,9 +351,9 @@ export default class ElementWrapper extends Wrapper {
 			block.maintain_context = true;
 		}
 
+		this.add_attributes(block);
 		this.add_bindings(block);
 		this.add_event_handlers(block);
-		this.add_attributes(block);
 		this.add_transitions(block);
 		this.add_animation(block);
 		this.add_actions(block);

test/runtime/samples/binding-input-range-change-with-max/_config.js

@@ -0,0 +1,33 @@
+export default {
+	html: `
+		<button></button>
+		<input type=range min=0 max=10>
+		<p>10 of 10</p>
+	`,
+
+	ssrHtml: `
+		<button></button>
+		<input type=range min=0 max=10 value=10>
+		<p>10 of 10</p>
+	`,
+
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, '10');
+
+		// should not change because max is 10, input range behaviour
+		// seems there is bug in jsdom (HTMLInputElement-impl) which behaviour is different from real browsers
+		// input.value = '20';
+		// assert.equal(input.value, '10');
+
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.Event('click'));
+
+		assert.equal(input.value, '20');
+		assert.htmlEqual(target.innerHTML, `
+			<button></button>
+			<input type=range min=0 max=20>
+			<p>20 of 20</p>
+		`);
+	},
+};

test/runtime/samples/binding-input-range-change-with-max/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	let value=10;
+	let max=10;
+
+	function change() {
+		value=20;
+		max=20;
+	}
+</script>
+
+<button on:click={change}/>
+<input type=range min=0 max={max} bind:value>
+<p>{value} of {max}</p>