fixes #688

docs/resources/changelog.md

@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Added `tag-base`, `tag-content`, and `tag-remove-button` parts to `<sl-select>` [#682](https://github.com/shoelace-style/shoelace/discussions/682)
 - Fixed a bug that allowed `<sl-dropdown>` to go into an incorrect state when activating the trigger while disabled [#684](https://github.com/shoelace-style/shoelace/pull/684)
+- Fixed a bug where Safari would sometimes not focus after preventing `sl-initial-focus` [#688](https://github.com/shoelace-style/shoelace/issues/688)
 - Improved the size of the remove button in `<sl-tag>`
 
 ## 2.0.0-beta.69

src/components/dialog/dialog.ts

@@ -161,10 +161,12 @@ export default class SlDialog extends LitElement {
 
       // Browsers that support el.focus({ preventScroll }) can set initial focus immediately
       if (hasPreventScroll) {
-        const slInitialFocus = emit(this, 'sl-initial-focus', { cancelable: true });
-        if (!slInitialFocus.defaultPrevented) {
-          this.panel.focus({ preventScroll: true });
-        }
+        requestAnimationFrame(() => {
+          const slInitialFocus = emit(this, 'sl-initial-focus', { cancelable: true });
+          if (!slInitialFocus.defaultPrevented) {
+            this.panel.focus({ preventScroll: true });
+          }
+        });
       }
 
       const panelAnimation = getAnimation(this, 'dialog.show');
@@ -177,10 +179,12 @@ export default class SlDialog extends LitElement {
       // Browsers that don't support el.focus({ preventScroll }) have to wait for the animation to finish before initial
       // focus to prevent scrolling issues. See: https://caniuse.com/mdn-api_htmlelement_focus_preventscroll_option
       if (!hasPreventScroll) {
-        const slInitialFocus = emit(this, 'sl-initial-focus', { cancelable: true });
-        if (!slInitialFocus.defaultPrevented) {
-          this.panel.focus();
-        }
+        requestAnimationFrame(() => {
+          const slInitialFocus = emit(this, 'sl-initial-focus', { cancelable: true });
+          if (!slInitialFocus.defaultPrevented) {
+            this.panel.focus();
+          }
+        });
       }
 
       emit(this, 'sl-after-show');

src/components/drawer/drawer.ts

@@ -181,10 +181,12 @@ export default class SlDrawer extends LitElement {
 
       // Browsers that support el.focus({ preventScroll }) can set initial focus immediately
       if (hasPreventScroll) {
-        const slInitialFocus = emit(this, 'sl-initial-focus', { cancelable: true });
-        if (!slInitialFocus.defaultPrevented) {
-          this.panel.focus({ preventScroll: true });
-        }
+        requestAnimationFrame(() => {
+          const slInitialFocus = emit(this, 'sl-initial-focus', { cancelable: true });
+          if (!slInitialFocus.defaultPrevented) {
+            this.panel.focus({ preventScroll: true });
+          }
+        });
       }
 
       const panelAnimation = getAnimation(this, `drawer.show${uppercaseFirstLetter(this.placement)}`);
@@ -197,10 +199,12 @@ export default class SlDrawer extends LitElement {
       // Browsers that don't support el.focus({ preventScroll }) have to wait for the animation to finish before initial
       // focus to prevent scrolling issues. See: https://caniuse.com/mdn-api_htmlelement_focus_preventscroll_option
       if (!hasPreventScroll) {
-        const slInitialFocus = emit(this, 'sl-initial-focus', { cancelable: true });
-        if (!slInitialFocus.defaultPrevented) {
-          this.panel.focus({ preventScroll: true });
-        }
+        requestAnimationFrame(() => {
+          const slInitialFocus = emit(this, 'sl-initial-focus', { cancelable: true });
+          if (!slInitialFocus.defaultPrevented) {
+            this.panel.focus();
+          }
+        });
       }
 
       emit(this, 'sl-after-show');