Skip to content

<select> doesn't respect selected attribute when spreading props #16274

Closed
@mihaipoenaru

Description

@mihaipoenaru

Describe the bug

When you have a basic select tag, and give it an {...others} spread (like it's in a component and receives some properties), it will no longer show any option, regardless of it having the 'selected' property or not.

I linked the playground repro, but just to have it here as well, because it's so simple to visualize:

<script>
	let others = {onclick: ()=> console.log('aaa')}
</script>

<select>
	<option>o1</option>
	<option selected>o2</option>
</select>

<select {...others}>
	<option>o1</option>
	<option selected>o2</option>
</select>

First select will have 'o2' selected, which is correct, the second select will have nothing selected. Only by removing the spread 'others' will it work again. Clicking on it will print the console, so the spread itself is working.

I'm not exactly sure when this started happening. I keep rolling back versions of svelte to no avail, but I know it definitely worked a few weeks ago when my full pipeline ran. I put "blocking an upgrade" because I will definitely revert to a working version once I... you know... actually find it.

Reproduction

https://svelte.dev/playground/187497f0959046c19ab25f2129e9a3ae?version=latest

Logs

System Info

Reproducible on all browsers, as I ran playwright tests on safari, chrome and firefox. Also ran it on chrome and firefox on Windows 11

Severity

blocking an upgrade

Metadata

Metadata

Assignees

No one assigned

    Labels

    p0stuff we should fix ASAP

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions