fixes #709

docs/resources/changelog.md

@@ -15,6 +15,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug that prevented form submission from working as expected in some cases
 - Fixed a bug that prevented `<sl-split-panel>` from toggling `vertical` properly [#703](https://github.com/shoelace-style/shoelace/issues/703)
 - Fixed a bug that prevented `<sl-color-picker>` from rendering a color initially [#704](https://github.com/shoelace-style/shoelace/issues/704)
+- Fixed a bug that caused focus trapping to fail when used inside a shadow root [#709](https://github.com/shoelace-style/shoelace/issues/709)
 - Improved accessibility throughout the docs
 - Improved accessibility of `<sl-dropdown>` so the trigger's expanded state is announced correctly
 - Improved accessibility of `<sl-format-date>` but rendering a `<time>` element instead of plain text

src/internal/modal.ts

@@ -10,18 +10,21 @@ export default class Modal {
     this.element = element;
     this.handleFocusIn = this.handleFocusIn.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
   }
 
   activate() {
     activeModals.push(this.element);
     document.addEventListener('focusin', this.handleFocusIn);
     document.addEventListener('keydown', this.handleKeyDown);
+    document.addEventListener('keyup', this.handleKeyUp);
   }
 
   deactivate() {
     activeModals = activeModals.filter(modal => modal !== this.element);
     document.removeEventListener('focusin', this.handleFocusIn);
     document.removeEventListener('keydown', this.handleKeyDown);
+    document.removeEventListener('keyup', this.handleKeyUp);
   }
 
   isActive() {
@@ -29,25 +32,33 @@ export default class Modal {
     return activeModals[activeModals.length - 1] === this.element;
   }
 
-  handleFocusIn(event: Event) {
-    const path = event.composedPath();
+  checkFocus() {
+    if (this.isActive()) {
+      if (!this.element.matches(':focus-within')) {
+        const { start, end } = getTabbableBoundary(this.element);
+        const target = this.tabDirection === 'forward' ? start : end;
 
-    // Trap focus so it doesn't go out of the modal's boundary
-    if (this.isActive() && !path.includes(this.element)) {
-      const { start, end } = getTabbableBoundary(this.element);
-      const target = this.tabDirection === 'forward' ? start : end;
-
-      if (typeof target?.focus === 'function') {
-        target.focus({ preventScroll: true });
+        if (typeof target?.focus === 'function') {
+          target.focus({ preventScroll: true });
+        }
       }
     }
   }
 
+  handleFocusIn() {
+    this.checkFocus();
+  }
+
   handleKeyDown(event: KeyboardEvent) {
-    // Quick hack to determine tab direction
     if (event.key === 'Tab' && event.shiftKey) {
       this.tabDirection = 'backward';
-      setTimeout(() => (this.tabDirection = 'forward'));
     }
+
+    // Ensure focus remains trapped after they key is pressed
+    requestAnimationFrame(() => this.checkFocus());
+  }
+
+  handleKeyUp() {
+    this.tabDirection = 'forward';
   }
 }