From f124e587c53176b048c2dcc946cf564a3bdfd505 Mon Sep 17 00:00:00 2001
From: Stephane Comeau <scomea@microsoft.com>
Date: Fri, 10 Mar 2023 09:56:53 -0800
Subject: [PATCH] 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 <chhol@microsoft.com>

---------

Co-authored-by: Chris Holt <chhol@microsoft.com>
---
 ...-9ba63b54-21bc-47e3-a176-545c43124446.json |  7 +++++
 .../fast-foundation/src/picker/picker.ts      | 28 +++++++++++++------
 2 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 change/@microsoft-fast-foundation-9ba63b54-21bc-47e3-a176-545c43124446.json

diff --git a/change/@microsoft-fast-foundation-9ba63b54-21bc-47e3-a176-545c43124446.json b/change/@microsoft-fast-foundation-9ba63b54-21bc-47e3-a176-545c43124446.json
new file mode 100644
index 00000000000..39ce8e2bb45
--- /dev/null
+++ 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": "stephcomeau@msn.com",
+  "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/src/picker/picker.ts b/packages/web-components/fast-foundation/src/picker/picker.ts
index 091006b457d..38b69db75e3 100644
--- 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