fixes #466

docs/resources/changelog.md

@@ -23,6 +23,7 @@ The docs have been updated to use the new `custom-elements.json` file. If you're
 - Fixed a bug in `sl-dialog` and `sl-drawer` where setting `open` intially didn't set a focus trap
 - Fixed a bug that resulted in form controls having incorrect validity when `disabled` was initially set [#473](https://github.com/shoelace-style/shoelace/issues/473)
 - Fixed a bug in the docs that caused the metadata file to be requested twice
+- Fixed a bug where tabbing out of a modal would cause the browser to lag [#466](https://github.com/shoelace-style/shoelace/issues/466)
 - Updated the docs to use the new `custom-elements.json` for component metadata
 
 ## 2.0.0-beta.44

src/internal/modal.ts

@@ -36,7 +36,11 @@ export default class Modal {
     if (this.isActive() && !path.includes(this.element)) {
       const tabbableElements = getTabbableElements(this.element);
       const index = this.tabDirection === 'backward' ? tabbableElements.length - 1 : 0;
-      tabbableElements[index].focus({ preventScroll: true });
+      const el = tabbableElements[index];
+
+      if (typeof el?.focus === 'function') {
+        el.focus({ preventScroll: true });
+      }
     }
   }
 

src/internal/tabbable.ts

@@ -66,13 +66,6 @@ export function getTabbableElements(root: HTMLElement | ShadowRoot) {
     if (root.shadowRoot && root.shadowRoot.mode === 'open') {
       getTabbableElements(root.shadowRoot).map(el => tabbableElements.push(el));
     }
-
-    // Look at slotted elements
-    if (root instanceof HTMLSlotElement) {
-      root.assignedElements().map((slottedEl: HTMLElement) => {
-        getTabbableElements(slottedEl).map(el => tabbableElements.push(el));
-      });
-    }
   }
 
   // Look for tabbable elements in children