Skip to content

Spread properties on inputs have unexpected readonly attributes #3764

Closed
@larryosborn

Description

@larryosborn

Describe the bug
Spread properties on <input> tags can have an unexpected behavior on readonly attributes. If a tag has readonly={false} along with a spread, then the readonly attribute is included in the tag as readonly="false". This results in a readonly input.

To Reproduce

https://svelte.dev/repl/956c1eeb49b24d8c91942878eaedb4e1?version=3.12.1

<script>
	let props = {
		type: 'text'
	}
	let value ='foo'
	let disabled = false
	let readonly = false
</script>
<div>
	Example A: Attribute is readonly="false"<br>
	<input {...props} bind:value {disabled} {readonly}>
</div>

<div>
	Example B: The readonly attribute is omitted<br>
	<input type="text" bind:value {disabled} {readonly}>
</div>

Expected behavior
In the example provided, the readonly attribute should be omitted if false.

Information about your Svelte project:

  • Your browser and the version: Version 77.0.3865.120 (Official Build) (64-bit)

  • Your operating system: OS X 10

  • Svelte version 3.12.1

Severity
minor

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions