From c4cfd2a5a2b1d48727488023d1361e3a5b7c32db Mon Sep 17 00:00:00 2001
From: TaraT <ttomar@adobe.com>
Date: Tue, 17 Sep 2024 12:29:40 +0530
Subject: [PATCH] fix(combobox): update selected item state in menu (#4730)

* fix(combobox): update selected item state in menu

* chore(combobox): added tests

---------

Co-authored-by: Rajdeep Chandra <rajrock38@gmail.com>
---
 packages/combobox/src/Combobox.ts       |  2 +
 packages/combobox/test/combobox.test.ts | 56 +++++++++++++++++++++++++
 2 files changed, 58 insertions(+)

diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts
index 994cca96b0..065a6955ac 100644
--- a/packages/combobox/src/Combobox.ts
+++ b/packages/combobox/src/Combobox.ts
@@ -493,6 +493,8 @@ export class Combobox extends Textfield {
                                                   ? 'true'
                                                   : 'false'}
                                               .value=${option.value}
+                                              .selected=${option.value ===
+                                              this.itemValue}
                                           >
                                               ${option.itemText}
                                           </sp-menu-item>
diff --git a/packages/combobox/test/combobox.test.ts b/packages/combobox/test/combobox.test.ts
index d5b789c55c..8d2698caa2 100644
--- a/packages/combobox/test/combobox.test.ts
+++ b/packages/combobox/test/combobox.test.ts
@@ -565,6 +565,62 @@ describe('Combobox', () => {
             expect(el.open).to.be.false;
             expect(el.activeDescendant).to.be.undefined;
         });
+        it('reflects the selected value in menu on reopening', async () => {
+            const el = await comboboxFixture();
+
+            await elementUpdated(el);
+
+            expect(el.value).to.equal('');
+            expect(el.activeDescendant).to.be.undefined;
+            expect(el.open).to.be.false;
+
+            let opened = oneEvent(el, 'sp-opened');
+            el.focusElement.click();
+            await opened;
+
+            const item = el.shadowRoot.querySelector(
+                '[value="banana"]'
+            ) as MenuItem;
+            await elementUpdated(item);
+
+            expect(el.open).to.be.true;
+
+            const itemValue = item.itemText;
+            const rect = item.getBoundingClientRect();
+            const closed = oneEvent(el, 'sp-closed');
+            await sendMouse({
+                steps: [
+                    {
+                        position: [
+                            rect.left + rect.width / 2,
+                            rect.top + rect.height / 2,
+                        ],
+                        type: 'click',
+                    },
+                ],
+            });
+            await closed;
+
+            expect(el.value).to.equal(itemValue);
+            expect(el.open).to.be.false;
+            expect(el.activeDescendant).to.be.undefined;
+
+            opened = oneEvent(el, 'sp-opened');
+            el.focusElement.click();
+            await opened;
+
+            await elementUpdated(el);
+            await elementUpdated(item);
+
+            expect(el.open).to.be.true;
+
+            // item should be selected
+            expect(
+                el.shadowRoot
+                    .querySelector('sp-menu')
+                    ?.querySelector('[selected]')?.textContent
+            ).to.equal(item.textContent);
+        });
         it('sets the value when an item is clicked programatically', async () => {
             const el = await comboboxFixture();