mirror of https://github.com/sveltejs/svelte
fix: preserve select selection with spread attributes (#18561)
Fixes #18557 A `<select>` with spread attributes initializes the option mutation observer even when those attributes never provide a `value`. In that case the element has no internal `__value`, but the observer previously treated the missing property as an explicit `undefined` value and deselected every option after an option was added or removed. Only reapply the programmatic selection when `__value` is actually present. This preserves the browser's current selection for spreads without a value while keeping the existing behavior for bindings, including an explicitly stored `undefined` value. A runtime-legacy regression fixture covers both adding and removing an option in client and hydration modes. ### Before submitting - [x] References the existing issue - [x] Uses a `fix:` title - [x] Includes a regression test - [x] Includes a patch changeset for `svelte` ### Test plan - [x] `FILTER=select-spread-preserve-selection pnpm test runtime-legacy --maxWorkers=1` (2 tests passed: client and hydrate) - [x] `git diff --check` - [ ] Full `pnpm test` was not run because the shared host was under resource pressure and broad test processes were explicitly avoided - [ ] `pnpm lint` and `pnpm check` were not run for the same reason - [ ] Targeted repository Prettier check was attempted, but could not start because `prettier-plugin-svelte` required the ungenerated `packages/svelte/compiler/index.js`; no broad build or dependency reinstall was run ### AI disclosure AI-assisted: the implementation, regression test, and pull request text were prepared with OpenAI Codex and reviewed by the contributor. Co-authored-by: Paolo Ricciuti <ricciutipaolo@gmail.com>pull/18576/head
parent
b29d7002ec
commit
2bace308e3
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: preserve select selection when spread attributes omit value
|
||||
@ -0,0 +1,25 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client', 'hydrate'],
|
||||
|
||||
async test({ assert, component, target }) {
|
||||
const select = target.querySelector('select');
|
||||
ok(select);
|
||||
|
||||
assert.equal(select.selectedIndex, 0);
|
||||
|
||||
component.toggle();
|
||||
flushSync();
|
||||
await Promise.resolve();
|
||||
|
||||
assert.equal(select.selectedIndex, 0);
|
||||
|
||||
component.toggle();
|
||||
flushSync();
|
||||
await Promise.resolve();
|
||||
|
||||
assert.equal(select.selectedIndex, 0);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
let show_extra = false;
|
||||
const attributes = { 'aria-label': 'choice' };
|
||||
|
||||
export function toggle() {
|
||||
show_extra = !show_extra;
|
||||
}
|
||||
</script>
|
||||
|
||||
<select {...attributes}>
|
||||
<option value="">Choose an option</option>
|
||||
<option value="first">First</option>
|
||||
{#if show_extra}
|
||||
<option value="extra">Extra</option>
|
||||
{/if}
|
||||
</select>
|
||||
Loading…
Reference in new issue