fix: picker should work in a shadow root (#6669)

* get right active element for root * Change files * prettier * Update change/@microsoft-fast-foundation-9ba63b54-21bc-47e3-a176-545c43124446.json Co-authored-by: Chris Holt <[email protected]> --------- Co-authored-by: Chris Holt <[email protected]>
microsoft · Jun 10, 2024 · f124e58 · f124e58
1 parent 9105a50
commit f124e58
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/change/@microsoft-fast-foundation-9ba63b54-21bc-47e3-a176-545c43124446.json b/change/@microsoft-fast-foundation-9ba63b54-21bc-47e3-a176-545c43124446.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "picker should work in shadow dom",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/src/picker/picker.ts b/packages/web-components/fast-foundation/src/picker/picker.ts
@@ -554,7 +554,7 @@ export class FASTPicker extends FormAssociatedPicker {
             return;
         }
 
-        if (open && document.activeElement === this.inputElement) {
+        if (open && this.getRootActiveElement() === this.inputElement) {
             this.flyoutOpen = open;
             Updates.enqueue(() => {
                 if (this.menuElement !== undefined) {
@@ -603,6 +603,7 @@ export class FASTPicker extends FormAssociatedPicker {
         if (e.defaultPrevented) {
             return false;
         }
+        const activeElement = this.getRootActiveElement();
         switch (e.key) {
             // TODO: what should "home" and "end" keys do, exactly?
             //
@@ -672,7 +673,7 @@ export class FASTPicker extends FormAssociatedPicker {
             }
 
             case keyArrowRight: {
-                if (document.activeElement !== this.inputElement) {
+                if (activeElement !== this.inputElement) {
                     this.incrementFocusedItem(1);
                     return false;
                 }
@@ -691,11 +692,11 @@ export class FASTPicker extends FormAssociatedPicker {
 
             case keyDelete:
             case keyBackspace: {
-                if (document.activeElement === null) {
+                if (activeElement === null) {
                     return true;
                 }
 
-                if (document.activeElement === this.inputElement) {
+                if (activeElement === this.inputElement) {
                     if (this.inputElement.selectionStart === 0) {
                         this.selection = this.selectedItems
                             .slice(0, this.selectedItems.length - 1)
@@ -709,7 +710,7 @@ export class FASTPicker extends FormAssociatedPicker {
 
                 const selectedItems: Element[] = Array.from(this.listElement.children);
                 const currentFocusedItemIndex: number = selectedItems.indexOf(
-                    document.activeElement
+                    activeElement
                 );
 
                 if (currentFocusedItemIndex > -1) {
@@ -806,7 +807,7 @@ export class FASTPicker extends FormAssociatedPicker {
             this.maxSelected !== undefined &&
             this.selectedItems.length >= this.maxSelected
         ) {
-            if (document.activeElement === this.inputElement) {
+            if (this.getRootActiveElement() === this.inputElement) {
                 const selectedItemInstances: Element[] = Array.from(
                     this.listElement.querySelectorAll("[role='listitem']")
                 );
@@ -820,6 +821,16 @@ export class FASTPicker extends FormAssociatedPicker {
         }
     }
 
+    private getRootActiveElement(): Element | null {
+        const rootNode = this.getRootNode();
+
+        if (rootNode instanceof ShadowRoot) {
+            return rootNode.activeElement;
+        }
+
+        return document.activeElement;
+    }
+
     /**
      * A list item has been invoked.
      */
@@ -882,9 +893,10 @@ export class FASTPicker extends FormAssociatedPicker {
             this.listElement.querySelectorAll("[role='listitem']")
         );
 
-        if (document.activeElement !== null) {
+        const activeElement = this.getRootActiveElement();
+        if (activeElement !== null) {
             let currentFocusedItemIndex: number = selectedItemsAsElements.indexOf(
-                document.activeElement
+                activeElement
             );
             if (currentFocusedItemIndex === -1) {
                 // use the input element