-
-
Notifications
You must be signed in to change notification settings - Fork 824
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.
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
Autofocus doesn't work on sl-input in Firefox and Safari #2000
Comments
Publicly reproduced using nothing but Shoelace from a CDN:
Confirmed as working ✔️ on Windows (Edge/Chrome 124); not working ❌ on Windows (Firefox 125), macOS (Safari 17.4) |
@KonnorRogers do you mind looking into this one as part of the FACE work for Web Awesome? |
@claviska I think this is an implementation issue. We could polyfill it, but perhaps we wait on the browsers to implement this? Chrome is the only one that behaves as expected. It is still an issue with FACE, it doesnt seem to have changed behavior even with |
Are there any relevant issues to link here for future reference? Any workarounds to suggest if we wait? |
I can't find any issues about it. It seems like people would need to do something like this: <sl-input autofocus tabindex="0"></sl-input> And then in our component, we could have a Note, we can't use It's bizarre that it works as expected in chrome. |
That feels weird. Should we open a browser bug about it before we hack something in the library? |
I'll open up browser bugs on Webkit and Firefox and see what they say. |
Sooo on further investigation, Firefox + Safari do work. For Safari 17.4.1 it requires Something about Lit's rendering seems to cause the issue. Here's a minimal reproduction using a "vanilla" custom element. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<input>
<my-input autofocus></my-input>
<script type="module">
import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';
customElements.define("my-input", class extends LitElement {
static formAssociated = true
static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true }
constructor () {
super()
this.internals = this.attachInternals()
}
render () {
return html`<input>`
}
})
// This works as expected.
// customElements.define("my-input", class extends HTMLElement {
// static formAssociated = true
// constructor () {
// super()
// this.internals = this.attachInternals()
// this.attachShadow({ mode: "open", delegatesFocus: true })
// }
// connectedCallback () {
// this.shadowRoot.innerHTML = `<input>`
// }
// })
</script>
</body>
</html> Discord question: https://discord.com/channels/1012791295170859069/1247285261591904306/1247285261591904306 GitHub issue: lit/lit#4662 Browsers tested: Chrome 125 ✅ |
So there's a few options here: A.) We could "polyfill" autofocus by finding the first element in the DOM tree with the B.) We could add a connectedCallback for autofocus, but could run into race conditions around when the elements is defined C.) have users set a D.) Do nothing and just say its not well supported on first browser load to use I'm personally leaning towards D since browsers seem to have some interesting timing issues around when the elements are defined and if theyll be autofocusable. , but happy to hear other thoughts A user scripted version would look something like this: window.addEventListener('DOMContentLoaded', () => {
const el = document.querySelector('[autofocus]')
if (el.tagName.includes("-")) {
customElements.whenDefined(el.tagName.toLowerCase())
.then(() => el.focus())
} else {
el.focus()
}
}) |
Hi! Here's the reproducer:
When opened in Firefox or Safari, the input is not focused. It works as expected in Chrome.
On top of that, if I try to focus the input manually, I get another error:
results in
TypeError: this.input is null
insideSlInput
. This occurs on all three browsers.Browser / OS
The text was updated successfully, but these errors were encountered: