Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

autofocus HTML attribute not working with curly braces JavaScript expression #4995

Closed
opensas opened this issue Jun 9, 2020 · 9 comments · Fixed by #6494
Closed

autofocus HTML attribute not working with curly braces JavaScript expression #4995

opensas opened this issue Jun 9, 2020 · 9 comments · Fixed by #6494
Labels
bug compiler Changes relating to the compiler feature request temp-stale

Comments

@opensas
Copy link
Contributor

opensas commented Jun 9, 2020 •
edited
Loading

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
@antony
Copy link
Member

antony commented Jun 9, 2020 •
edited
Loading

@opensas can confirm this looks like a bug, but you should also be aware that Svelte is very accessibility focused, and autofocus is an accessibility no-no.

@antony antony added the bug label Jun 9, 2020
@opensas
Copy link
Contributor Author

opensas commented Jun 9, 2020

Thanks for the reply @antony , I'm aware of svelte accessibility focused (see what I did?) attitude.

What would be the best way to handle autofocus in a a11y friendly way? The way I see it, programatics option to achieve autofocus (element.focus()) will probable have the same problem.

@Conduitry
Copy link
Member

At some point in the past, Svelte used to handle autofocus attributes specially and compile them to el.focus() calls, but that appears to have broken.

@Conduitry
Copy link
Member

I seem to be wrong about that. A static autofocus attribute results in an el.focus() inside the mount function for the block, but a dynamic value was never handled it doesn't look like. Presumably we'd want this to compile to if (dynamic_expression) { el.focus(); }.

@opensas
Copy link
Contributor Author

opensas commented Jun 10, 2020 •
edited
Loading

Excuse my ignorance, but I'm inspecting it in the repl I posted and in all cases I see the following html being generated:

<body>input to focus: <input autofocus=""><br></body>

It's the same wether I execute:

<script>
	let autofocus = true
</script>

input to focus: <input autofocus/><br />

or

<script>
	let autofocus = true
</script>

input to focus: <input {autofocus}/><br />

In the first case it works, but in the second it won't.

I don't quite get how running el.focus() is related to the autofocus="" appearing in the dom

@Conduitry
Copy link
Member

Programmatically creating an element and giving it the autofocus attribute does not cause the browser to focus the element. I'm guessing the presence of the attribute is only checked once when first loading the page. To provide more helpful behavior, Svelte has special handling to add a manual el.focus() call after an element is created, but it's only currently working in cases with a static autofocus attribute.

@opensas
Copy link
Contributor Author

opensas commented Jun 10, 2020

Absolutely clear

I had a look at the genarated js and it's even more clear what's happening:

https://svelte.dev/repl/dba0f324a0a14bdfb0df7d1f7af4a2e6?version=3.23.1

input to focus: <input {autofocus}/><br />:

	return {
		c() {
			t = text("input to focus: ");
			input = element("input");
			br = element("br");
			input.autofocus = autofocus;
		},
		m(target, anchor) {
			insert(target, t, anchor);
			insert(target, input, anchor);
			insert(target, br, anchor);
		},
		p: noop,
		i: noop,
		o: noop,
		d(detaching) {
			if (detaching) detach(t);
			if (detaching) detach(input);
			if (detaching) detach(br);
		}
	}

input to focus: <input autofocus/><br />:

		m(target, anchor) {
			insert(target, t, anchor);
			insert(target, input, anchor);
			insert(target, br, anchor);
			input.focus();
		},

so efectively the input.focus() is missing when using js expressions

@skippednote skippednote mentioned this issue Jun 25, 2020
Closed
4 tasks
@hmt
Copy link
Contributor

hmt commented 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

@pngwn pngwn added compiler Changes relating to the compiler feature request temp-stale and removed feature: attributes labels Jun 27, 2021
@bluwy bluwy mentioned this issue Jul 5, 2021
Merged
5 tasks
@Conduitry
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug compiler Changes relating to the compiler feature request temp-stale
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[fix] dynamic autofocus
fix(4995): dynamically set autofocus
6 participants
@antony @opensas @hmt @mindrones @pngwn @Conduitry