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>
adobe · Sep 17, 2024 · c4cfd2a · c4cfd2a
1 parent d667d08
commit c4cfd2a
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git 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
@@ -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();