bug: Set focus to a shadow root element not works in Safari

[sophiesummer]

Prequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

@stencil/core@2.3.0

Current Behavior

I am trying to focus on <button> element after page loading. The <button> tag is under shadow root. I set this.el.shadowRoot.querySelector('.my-button').focus(); inside componentDidLoad(), which works fine in Chrome, Firefox and IE, but not works in Safari.

Expected Behavior

Set button.focus() inside componentDidLoad(), the button should be focused when running in Safari.

Steps to Reproduce

import { Component, h, Element } from '@stencil/core';

@Component({
  tag: 'my-button',
  styleUrl: 'my-button.css',
  shadow: true
})
export class MyButtonComponent {
  @Element() el: HTMLElement;
  @Prop() getFocused: boolean;

  componentDidLoad() {
    if (this.getFocused) {
      const button: HTMLElement= this.el.shadowRoot.querySelector('.my-button');
      button.focus();
    }
  }

  render() {
    return (
      <button  class="my-button">
        <slot></slot>
      </button>
    );
  }
}

Additional Information

Find a workaround is to use setTimeout wrap the button.focus() which will work in Safari, but want to know why without setTimeout it doesn't work in Safari only? Is this a bug of stenciljs or Safari? Thanks a lot!

[splitinfinities]

Hey there! Could you create a repro issue for me? That could help us identify and solve the issue faster.

Thank you!

[xrzhuang]

nice workaround @sophiesummer !!! i too am getting this issue where my use case is use shadow dom query selector to grab the clientHeight of a div I apply an inline style to in componentDidLoad and here I am getting the incorrect value

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[rwaskiewicz]

This issue is being closed due to the lack of a code reproduction. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!