Comments (9)
@KonnorRogers do you mind looking into this one as part of the FACE work for Web Awesome?
from shoelace.
@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 delegatesFocus: true
from shoelace.
Are there any relevant issues to link here for future reference? Any workarounds to suggest if we wait?
from shoelace.
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.
from shoelace.
Publicly reproduced using nothing but Shoelace from a CDN:
- demo: sl.rt.ht/2000
- code: sl.rt.ht/2000?
Confirmed as working ✔️ on Windows (Edge/Chrome 124); not working ❌ on Windows (Firefox 125), macOS (Safari 17.4)
from shoelace.
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 connectedCallback
check that checks the current active element, and if <sl-input>
is being currently focused and then adjust focus and removes the tabindex
Note, without SSR, a user needs to add the tabindex
because if we do it in the component, it fires too late.
Note, we can't use tabindex="-1"
because it will make all children of the <sl-input>
not focusable.
It's bizarre that it works as expected in chrome.
from shoelace.
That feels weird. Should we open a browser bug about it before we hack something in the library?
from shoelace.
Sooo on further investigation, Firefox + Safari do work. For Safari 17.4.1 it requires this.attachInternals()
, for Firefox, it works simply with proper rendering.
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 ✅
Firefox 126.0.1 ❌
Safari 17.4.1 ❌
from shoelace.
So there's a few options here:
A.) We could "polyfill" autofocus by finding the first element in the DOM tree with the autofocus
attribute, wait for it to be defined, and then focus it if its visible (autofocus shouldnt run for elements contained inside of popovers / dialogs)
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 tabindex
on the autofocusable element, when it "connects", remove the tabindex, and focus the appropriate first element in the shadow dom.
D.) Do nothing and just say its not well supported on first browser load to use autofocus
and instead direct users to only use autofocus
for dialogs / popovers and instead provide an "autofocus" script a user could run with client side JS to autofocus what they want by waiting for the element to be defined.
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()
}
})
from shoelace.
Related Issues (20)
- carousel with "slide-per-page" is not working properly in rtl documents HOT 1
- `@watch()` shouldn't patch the prototype every time it's used. HOT 2
- Looping Carousel is out of order when inside of Sl-Resize-Observer
- Menu: Submenus: Right to Left: Submenu Location and Arrows not flipped HOT 2
- Localisation does not respect browser settings HOT 3
- Events should subclass Event instead of using CustomEvents HOT 3
- Submenus in dropdown panels don't scroll HOT 1
- <sl-color-picker hoist> causes warning due to non-passive touchmove listener HOT 2
- sl-drawer issues when using keyboard navigation HOT 1
- Event bubbling doesn't appear to be working as described: event bubbles up then circles back around to the child element HOT 1
- events like sl-hide bubbling is confusing HOT 1
- page shake when dialog opend HOT 3
- sl-popup in scrollable section in<dialog> gets clipped in safari
- Dark theme not working, when installed via NPM HOT 1
- Form can still be implicitly submitted when primary button is a disabled shoelace component HOT 1
- sl-select: the small element used as an optgroup title should have its display set to block HOT 1
- Combining dropdown, menu and triggering a drawer causes a weird show animation HOT 4
- Component type resolution fails including Vue types HOT 4
- Translation mistake
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from shoelace.