Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

autofocus HTML attribute not working with curly braces JavaScript expression

See original GitHub issue

Describe the bug The autofocus HTML attribute is not working with curly braces JavaScript expression

Logs Please include browser console and server logs around the time this bug occurred.

To Reproduce

Check this repl and this other repl with a simpler example.

Steps to reproduce:

Create the following svelte component

<script>
	let autofocus = true
</script>

input to focus: <input {autofocus}/>

Expected behavior The autofocus attribute to work as expected

Severity annoying, there are workarounds to deal with autofoccus programmatically

Issue Analytics

State:
Created 3 years ago
Comments:9 (9 by maintainers)

Top GitHub Comments

2reactions

hmtcommented, Aug 16, 2020

I didn’t even know this attribute existed. If anyone sees this and needs a quick fix:

<script>
  const focus = node => node.focus();
</script>
<input use:focus type="text">

Actions for the win

1reaction

Conduitrycommented, Jul 23, 2021

This is fixed now in 3.40.2 - https://svelte.dev/repl/c11942342a554a0e8df4b28d4248e313?version=3.40.2

Top Results From Across the Web

Setting 'autofocus' attribute with JavaScript not working

There is an issue of setting the attribute, to having it there natively while the HTML is rendering. – Stephen Jenkins. May 28,...

HTML5 Security Cheatsheet

User submitted markup should not contain "autofocus" attributes. ... This vector is ideal to trick regular expression based HTML filters and sanitizers.

CS50W - Lecture 6 - User Interfaces

... 1:01:42I can use curly braces to say plug in the value of some JavaScript ... using syntax much like an HTML attribute,...

CS50 2020 - Lecture 9 - Flask

... 0:29:57that there's other attributes in HTML like autocomplete equals off. ... 1:53:34I can in here say, in Jinja syntax, not the curly...

Issues - HTML Weekly Tracker

↓ID ↓State Raised on ↓Product Open Actions ISSUE‑1. PINGPOST CLOSED 2007‑11‑02 HTML 5 spec 0 ISSUE‑2. PINGUI CLOSED 2007‑11‑03 HTML 5 spec 0 ISSUE‑3 style‑attribute CLOSED...