From 969f966585256c3a496eddb4cb84c0142aa7ae9c Mon Sep 17 00:00:00 2001
From: Hunter Loftis <hunter@hunterloftis.com>
Date: Thu, 4 Aug 2022 16:32:13 -0400
Subject: [PATCH] fix(picker): query less strictly to support automatically
 selecting values

---
 packages/picker/src/Picker.ts |  2 +-
 packages/picker/test/index.ts | 37 +++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
index 20a636987b..bc8483cbb6 100644
--- a/packages/picker/src/Picker.ts
+++ b/packages/picker/src/Picker.ts
@@ -540,7 +540,7 @@ export class PickerBase extends SizedMixin(Focusable) {
             } else {
                 this.menuItems = [
                     ...this.querySelectorAll(
-                        ':scope > sp-menu-item, sp-menu:not([slot="submenu"]) sp-menu-item'
+                        'sp-menu-item:not([slot="submenu"] *)'
                     ),
                 ] as MenuItem[];
             }
diff --git a/packages/picker/test/index.ts b/packages/picker/test/index.ts
index 773e40a1e9..36fcd80a4d 100644
--- a/packages/picker/test/index.ts
+++ b/packages/picker/test/index.ts
@@ -933,6 +933,43 @@ export function runPickerTests(): void {
             expect(getParentOffset(firstItem)).to.be.greaterThan(-1);
         });
     });
+    describe('grouped', async () => {
+        const groupedFixture = async (): Promise<Picker> => {
+            return fixture<Picker>(
+                html`
+                    <sp-picker
+                        quiet
+                        label="I would like to use Spectrum Web Components"
+                        value="0"
+                    >
+                        <sp-menu-group>
+                            <span slot="header">Timeline</span>
+                            <sp-menu-item value="0" id="should-be-selected">
+                                Immediately
+                            </sp-menu-item>
+                            <sp-menu-item value="1">
+                                I'm already using them
+                            </sp-menu-item>
+                            <sp-menu-divider></sp-menu-divider>
+                            <sp-menu-item value="2">Soon</sp-menu-item>
+                            <sp-menu-item value="3">
+                                As part of my next project
+                            </sp-menu-item>
+                            <sp-menu-item value="4">In the future</sp-menu-item>
+                        </sp-menu-group>
+                    </sp-picker>
+                `
+            );
+        };
+        beforeEach(async () => {
+            el = await groupedFixture();
+            await elementUpdated(el);
+        });
+        it('selects the item with a matching value in a group', async () => {
+            const item = el.querySelector('#should-be-selected') as MenuItem;
+            expect(item.selected).to.be.true;
+        });
+    });
     describe('slotted label', () => {
         const pickerFixture = async (): Promise<Picker> => {
             const test = await fixture<Picker>(