Fix controlled menuitems

packages/action-menu/src/ActionMenu.ts

@@ -45,6 +45,9 @@ export class ActionMenu extends ObserveSlotPresence(
         return [actionMenuStyles];
     }
 
+    @property({ type: Boolean })
+    public unmanaged = false;
+
     @property({ type: String })
     public override selects: undefined | 'single' = undefined;
 
@@ -116,10 +119,39 @@ export class ActionMenu extends ObserveSlotPresence(
             >
                 ${this.buttonContent}
             </sp-action-button>
-            ${this.renderMenu} ${this.renderDescriptionSlot}
+            ${this.unmanaged ? this.renderUnmanagedMenu : this.renderMenu}
+            ${this.renderDescriptionSlot}
         `;
     }
 
+    protected get renderUnmanagedMenu(): TemplateResult {
+        const menu = html`
+            <sp-menu
+                aria-labelledby="applied-label"
+                @change=${this.handleChange}
+                id="menu"
+                @keydown=${{
+                    handleEvent: this.handleEnterKeydown,
+                    capture: true,
+                }}
+                role=${this.listRole}
+                size=${this.size}
+                @sp-menu-item-added-or-updated=${this.shouldManageSelection}
+            >
+                <slot @slotchange=${this.shouldScheduleManageSelection}></slot>
+            </sp-menu>
+        `;
+        this.hasRenderedOverlay =
+            this.hasRenderedOverlay ||
+            this.focused ||
+            this.open ||
+            !!this.deprecatedMenu;
+        if (this.hasRenderedOverlay) {
+            return this.renderOverlay(menu);
+        }
+        return menu;
+    }
+
     protected override update(changedProperties: PropertyValues<this>): void {
         if (changedProperties.has('invalid')) {
             this.invalid = false;

packages/action-menu/stories/action-menu.stories.ts

@@ -320,6 +320,7 @@ export const controlled = ({ align = 'start' } = {}): TemplateResult => {
     return html`
         <sp-action-menu
             label="View"
+            unmanaged
             @change=${onChange}
             style=${ifDefined(
                 align === 'end' ? 'float: inline-end;' : undefined

packages/action-menu/test/index.ts

@@ -30,6 +30,7 @@ import {
 } from '../../../test/testing-helpers.js';
 import '@spectrum-web-components/dialog/sp-dialog-base.js';
 import {
+    controlled,
     iconOnly,
     tooltipDescriptionAndPlacement,
 } from '../stories/action-menu.stories.js';
@@ -585,6 +586,38 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
             expect(selectedItem.textContent).to.include('Two');
             expect(selectedItem.selected).to.be.true;
         });
+        it('does not change selected state by default', async function () {
+            const el = await fixture<ActionMenu>(controlled());
+            const item = el.querySelector(
+                'sp-menu-item[value="snap"]'
+            ) as MenuItem;
+
+            expect(item.selected).to.be.true;
+
+            const open = oneEvent(el, 'sp-opened');
+            const rect = el.getBoundingClientRect();
+            const menuClick = {
+                steps: [
+                    {
+                        position: [
+                            rect.left + rect.width / 2,
+                            rect.top + rect.height / 2,
+                        ] as [number, number],
+                        type: 'click' as const,
+                    },
+                ],
+            };
+            await sendMouse(menuClick);
+            await open;
+
+            expect(item.selected).to.be.true;
+
+            const close = oneEvent(el, 'sp-closed');
+            await sendMouse(menuClick);
+            await close;
+
+            expect(item.selected).to.be.true;
+        });
         it('shows tooltip', async function () {
             const openSpy = spy();
             const el = await fixture<ActionMenu>(

packages/picker/src/Picker.ts

@@ -68,7 +68,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     @query('#button')
     public button!: HTMLButtonElement;
 
-    private deprecatedMenu: Menu | null = null;
+    protected deprecatedMenu: Menu | null = null;
 
     @property({ type: Boolean, reflect: true })
     public override disabled = false;