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 doesn't work on sl-input in Firefox and Safari #2000

Open
WouldYouKindly opened this issue Apr 27, 2024 · 2 comments
Open

Autofocus doesn't work on sl-input in Firefox and Safari #2000

WouldYouKindly opened this issue Apr 27, 2024 · 2 comments
Assignees
@KonnorRogers
Labels
bug Things that aren't working right in the library.

Comments

@WouldYouKindly
Copy link

Hi! Here's the reproducer:

<!DOCTYPE html>
<html lang="en" class="sl-theme-dark">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slash code</title>

  <script type="module">
    import "@shoelace-style/shoelace";
    import '@shoelace-style/shoelace/dist/themes/dark.css';

    import {html, LitElement} from 'lit';

    class Debug extends LitElement {
        render() {
            return html`<sl-input autofocus></sl-input>`;
        }
    }

    customElements.define('debug-page', Debug);
  </script>
</head>

<body>
  <debug-page></debug-page>
</body>

</html>

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:

firstUpdated() {
    this.shadowRoot.querySelector('sl-input').focus();
}

results in TypeError: this.input is null inside SlInput. This occurs on all three browsers.

Browser / OS

  • OS: Mac
  • Browser: Firefox 125.0.1 / Safari 17.2.1
@WouldYouKindly WouldYouKindly added the bug Things that aren't working right in the library. label Apr 27, 2024
@CetinSert
Copy link

CetinSert commented Apr 29, 2024 •
edited

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)

@claviska claviska assigned claviska and KonnorRogers and unassigned claviska May 10, 2024
@claviska
Copy link
Member

@KonnorRogers do you mind looking into this one as part of the FACE work for Web Awesome?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@KonnorRogers KonnorRogers

Labels
bug Things that aren't working right in the library.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@CetinSert @claviska @WouldYouKindly @KonnorRogers