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
Floze 1 month ago committed by GitHub
parent b29d7002ec
commit 2bace308e3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: preserve select selection when spread attributes omit value

@ -56,8 +56,10 @@ export function select_option(select, value, mounting = false) {
*/
export function init_select(select) {
var observer = new MutationObserver(() => {
// @ts-ignore
select_option(select, select.__value);
if ('__value' in select) {
// @ts-ignore
select_option(select, select.__value);
}
// Deliberately don't update the potential binding value,
// the model should be preserved unless explicitly changed
});

@ -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…
Cancel
Save