mirror of https://github.com/sveltejs/svelte
Fixes #16413 The previous fix was insufficient as it didn't account for effects running as a result of a change, which is executed in a different batch. Instead we now set a boolean that is true while an async branch is flushed.binding-fix-2
parent
ce4a99ed6d
commit
bf7de3a56b
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: keep input in sync when binding updated via effect
|
@ -0,0 +1,37 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 110));
|
||||
|
||||
const [input] = target.querySelectorAll('input');
|
||||
|
||||
assert.equal(input.value, 'a');
|
||||
assert.htmlEqual(target.innerHTML, `<p>a</p><input />`);
|
||||
|
||||
flushSync(() => {
|
||||
input.focus();
|
||||
input.value = 'ab';
|
||||
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||
});
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
|
||||
flushSync(() => {
|
||||
input.focus();
|
||||
input.value = 'abc';
|
||||
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||
});
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 60));
|
||||
|
||||
assert.equal(input.value, 'abc');
|
||||
assert.htmlEqual(target.innerHTML, `<p>ab</p><input />`);
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 60));
|
||||
|
||||
assert.equal(input.value, 'abc');
|
||||
assert.htmlEqual(target.innerHTML, `<p>abc</p><input />`);
|
||||
}
|
||||
});
|
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
let value = $state('a');
|
||||
|
||||
function push(value) {
|
||||
// Cannot use a queue and flush it manually here, because we need the input to be focused
|
||||
const deferred = Promise.withResolvers();
|
||||
setTimeout(() => deferred.resolve(value), 100);
|
||||
return deferred.promise;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:boundary>
|
||||
<p>{await push(value)}</p>
|
||||
<input bind:value />
|
||||
|
||||
{#snippet pending()}
|
||||
<p>loading</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
@ -0,0 +1,27 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [input] = target.querySelectorAll('input');
|
||||
|
||||
assert.equal(input.value, '2');
|
||||
assert.htmlEqual(target.innerHTML, `<p>2</p><input type="number" />`);
|
||||
|
||||
flushSync(() => {
|
||||
input.focus();
|
||||
input.value = '3';
|
||||
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||
});
|
||||
assert.equal(input.value, '3');
|
||||
assert.htmlEqual(target.innerHTML, `<p>3</p><input type="number" />`);
|
||||
|
||||
flushSync(() => {
|
||||
input.focus();
|
||||
input.value = '6';
|
||||
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
|
||||
});
|
||||
assert.equal(input.value, '5');
|
||||
assert.htmlEqual(target.innerHTML, `<p>5</p><input type="number" />`);
|
||||
}
|
||||
});
|
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
let value = $state(0)
|
||||
|
||||
const min = 2
|
||||
const max = 5
|
||||
|
||||
$effect(() => {
|
||||
setValue()
|
||||
})
|
||||
|
||||
function setValue() {
|
||||
if (value < min) {
|
||||
value = min
|
||||
}
|
||||
if (value > max) {
|
||||
value = max
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>{value}</p>
|
||||
<input type="number" bind:value />
|
Loading…
Reference in new issue