fix(menu): MenuItem focus stealing from input elements on mouseover (#5732)

Rajdeepc · Rajdeep Chandra · Rajdeep Chandra · web-flow · commit 4880da4f80a2 · 2025-10-10T18:38:00.000+05:30
* fix(menu): added check to find focused element within root context

* fix(menu): added story

* fix(menu): added test

* chore(menu): added changeset

* fix(menu): added global const for component input pattern

* fix(menu): remove delimiter from the regexp constructor

* chore: skipped prod and vrt tests on the new story

* chore: fix tests helpers

* fix: check for cross root boundary

* fix: code comments

---------

Co-authored-by: Rajdeep Chandra &lt;rajdeepchandra@Rajdeeps-MacBook-Pro-6.local&gt;
Co-authored-by: Rajdeep Chandra &lt;rajdeepchandra@rajdeeps-mbp-7.macromedia.com&gt;
Co-authored-by: Rajdeep Chandra &lt;rajdeepchandra@Rajdeeps-MacBook-Pro-7.local&gt;
diff --git a/.changeset/cruel-eels-open.md b/.changeset/cruel-eels-open.md
@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/menu': minor
+---
+
+**Fixed** MenuItem focus stealing from input elements on mouseover by enhanceing MenuItem's `handleMouseover` method to detect when an input element currently has focus and prevent stealing focus in those cases.
diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts
@@ -13,6 +13,7 @@
 import {
     CSSResultArray,
     html,
+    INPUT_COMPONENT_PATTERN,
     nothing,
     PropertyValues,
     TemplateResult,
@@ -479,13 +480,101 @@ export class MenuItem extends LikeAnchor(
             this.id = `sp-menu-item-${randomID()}`;
         }
     }
+
+    private getActiveElementSafely(): HTMLElement | null {
+        let root = this.getRootNode() as Document | ShadowRoot;
+        let activeElement = root.activeElement as HTMLElement;
+
+        // If no active element in current context and we're in shadow DOM,
+        // traverse up to find the document-level active element
+        if (!activeElement && root !== document) {
+            while (root && root !== document && 'host' in root) {
+                root = (root as ShadowRoot).host.getRootNode() as
+                    | Document
+                    | ShadowRoot;
+                activeElement = root.activeElement as HTMLElement;
+                if (activeElement) break;
+            }
+        }
+
+        return activeElement;
+    }
+
     handleMouseover(event: MouseEvent): void {
         const target = event.target as HTMLElement;
         if (target === this) {
-            this.focus();
+            // Check for active input elements across shadow boundaries
+            const activeElement = this.getActiveElementSafely();
+
+            // Only focus this menu item if no input element is currently active
+            // This prevents interrupting user input in search boxes, text fields, etc.
+            if (!activeElement || !this.isInputElement(activeElement)) {
+                this.focus();
+            }
             this.focused = false;
         }
     }
+
+    /**
+     * Determines if an element is an input field that should retain focus.
+     * Uses multiple detection strategies to identify input elements generically.
+     */
+    private isInputElement(element: HTMLElement): boolean {
+        // Check for native HTML input elements
+        if (this.isNativeInputElement(element)) {
+            return true;
+        }
+
+        // Check for contenteditable elements (rich text editors)
+        if (element.contentEditable === 'true') {
+            return true;
+        }
+
+        // Check for Spectrum Web Components with input-like behavior
+        if (this.isSpectrumInputComponent(element)) {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Checks if an element is a native HTML input element.
+     */
+    private isNativeInputElement(element: HTMLElement): boolean {
+        return (
+            element instanceof HTMLInputElement ||
+            element instanceof HTMLTextAreaElement ||
+            element instanceof HTMLSelectElement
+        );
+    }
+
+    /**
+     * Checks if an element is a Spectrum Web Component with input behavior.
+     * Uses ARIA roles and component patterns for generic detection.
+     */
+    private isSpectrumInputComponent(element: HTMLElement): boolean {
+        // Check if it's a Spectrum Web Component
+        if (!element.tagName.startsWith('SP-')) {
+            return false;
+        }
+
+        // Check ARIA role for input-like behavior
+        const role = element.getAttribute('role');
+        const inputRoles = ['textbox', 'searchbox', 'combobox', 'slider'];
+        if (role && inputRoles.includes(role)) {
+            return true;
+        }
+
+        // Check for components that typically contain input elements
+        // This covers components like sp-search, sp-textfield, sp-number-field, etc.
+        const inputComponentPattern = INPUT_COMPONENT_PATTERN;
+        if (inputComponentPattern.test(element.tagName)) {
+            return true;
+        }
+
+        return false;
+    }
     /**
      * forward key info from keydown event to parent menu
      */
diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts
@@ -28,6 +28,11 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-export.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
+import '@spectrum-web-components/search/sp-search.js';
+import '@spectrum-web-components/textfield/sp-textfield.js';
+import '@spectrum-web-components/number-field/sp-number-field.js';
+import '@spectrum-web-components/combobox/sp-combobox.js';
+import '@spectrum-web-components/color-field/sp-color-field.js';
 
 export default {
     component: 'sp-menu',
@@ -484,3 +489,105 @@ export const dynamicRemoval = (): TemplateResult => {
         </sp-menu>
     `;
 };
+
+export const InputsWithMenu = (): TemplateResult => {
+    return html`
+        <div style="padding: 20px; max-width: 600px;">
+            <h3>Input Focus Demo</h3>
+            <p>
+                Try typing in any input field below, then hover over the menu
+                items. The input should maintain focus and not be interrupted.
+                This demonstrates the fix for focus stealing from all supported
+                input types.
+            </p>
+
+            <div
+                style="display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-bottom: 20px;"
+            >
+                <!-- Search Input -->
+                <div>
+                    <label for="demo-search">Search:</label>
+                    <sp-search
+                        id="demo-search"
+                        placeholder="Search input..."
+                        style="width: 100%; margin-top: 8px;"
+                    ></sp-search>
+                </div>
+
+                <!-- Textfield Input -->
+                <div>
+                    <label for="demo-textfield">Textfield:</label>
+                    <sp-textfield
+                        id="demo-textfield"
+                        placeholder="Textfield input..."
+                        style="width: 100%; margin-top: 8px;"
+                    ></sp-textfield>
+                </div>
+
+                <!-- Number Field Input -->
+                <div>
+                    <label for="demo-number">Number Field:</label>
+                    <sp-number-field
+                        id="demo-number"
+                        placeholder="Number input..."
+                        style="width: 100%; margin-top: 8px;"
+                    ></sp-number-field>
+                </div>
+
+                <!-- Combobox Input -->
+                <div>
+                    <label for="demo-combobox">Combobox:</label>
+                    <sp-combobox
+                        id="demo-combobox"
+                        placeholder="Combobox input..."
+                        style="width: 100%; margin-top: 8px;"
+                    ></sp-combobox>
+                </div>
+
+                <!-- Color Field Input -->
+                <div>
+                    <label for="demo-color">Color Field:</label>
+                    <sp-color-field
+                        id="demo-color"
+                        placeholder="Color input..."
+                        style="width: 100%; margin-top: 8px;"
+                    ></sp-color-field>
+                </div>
+
+                <!-- Native Input -->
+                <div>
+                    <label for="demo-native">Native Input:</label>
+                    <input
+                        id="demo-native"
+                        placeholder="Native input..."
+                        style="width: 100%; margin-top: 8px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"
+                    />
+                </div>
+            </div>
+
+            <sp-popover open>
+                <sp-menu>
+                    <sp-menu-item>Search Results</sp-menu-item>
+                    <sp-menu-item>Recent Searches</sp-menu-item>
+                    <sp-menu-item>Saved Searches</sp-menu-item>
+                    <sp-menu-item>Advanced Search</sp-menu-item>
+                    <sp-menu-item>Search Settings</sp-menu-item>
+                    <sp-menu-item>Clear History</sp-menu-item>
+                </sp-menu>
+            </sp-popover>
+        </div>
+    `;
+};
+
+InputsWithMenu.parameters = {
+    tags: ['!dev'],
+};
+
+InputsWithMenu.swc_vrt = {
+    skip: true,
+};
+
+InputsWithMenu.parameters = {
+    // Disables Chromatic's snapshotting on a global level
+    chromatic: { disableSnapshot: true },
+};
diff --git a/packages/menu/test/menu.test.ts b/packages/menu/test/menu.test.ts
@@ -23,6 +23,12 @@ import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/menu/sp-menu-group.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
 import '@spectrum-web-components/menu/sp-menu.js';
+import '@spectrum-web-components/search/sp-search.js';
+import '@spectrum-web-components/textfield/sp-textfield.js';
+import '@spectrum-web-components/number-field/sp-number-field.js';
+import '@spectrum-web-components/combobox/sp-combobox.js';
+import '@spectrum-web-components/color-field/sp-color-field.js';
+import '@spectrum-web-components/popover/sp-popover.js';
 import { isFirefox, isWebKit } from '@spectrum-web-components/shared';
 import { sendKeys } from '@web/test-runner-commands';
 import { spy } from 'sinon';
@@ -834,4 +840,142 @@ describe('Menu', () => {
         // Test that the component can be disconnected without errors
         el.remove();
     });
+
+    it('does not steal focus from input elements on mouseover', async () => {
+        const el = await fixture<Menu>(html`
+            <div>
+                <sp-search
+                    id="test-search"
+                    placeholder="Search input..."
+                ></sp-search>
+                <sp-textfield
+                    id="test-textfield"
+                    placeholder="Textfield input..."
+                ></sp-textfield>
+                <sp-number-field
+                    id="test-number"
+                    placeholder="Number input..."
+                ></sp-number-field>
+                <sp-combobox
+                    id="test-combobox"
+                    placeholder="Combobox input..."
+                ></sp-combobox>
+                <sp-color-field
+                    id="test-color"
+                    placeholder="Color input..."
+                ></sp-color-field>
+                <input id="test-native" placeholder="Native input..." />
+
+                <sp-popover open>
+                    <sp-menu>
+                        <sp-menu-item id="menu-item-1">
+                            Menu Item 1
+                        </sp-menu-item>
+                        <sp-menu-item id="menu-item-2">
+                            Menu Item 2
+                        </sp-menu-item>
+                        <sp-menu-item id="menu-item-3">
+                            Menu Item 3
+                        </sp-menu-item>
+                    </sp-menu>
+                </sp-popover>
+            </div>
+        `);
+
+        await elementUpdated(el);
+
+        const searchInput = el.querySelector('#test-search') as HTMLElement;
+        const textfieldInput = el.querySelector(
+            '#test-textfield'
+        ) as HTMLElement;
+        const numberInput = el.querySelector('#test-number') as HTMLElement;
+        const comboboxInput = el.querySelector('#test-combobox') as HTMLElement;
+        const colorInput = el.querySelector('#test-color') as HTMLElement;
+        const nativeInput = el.querySelector(
+            '#test-native'
+        ) as HTMLInputElement;
+
+        const menuItem1 = el.querySelector('#menu-item-1') as MenuItem;
+        const menuItem2 = el.querySelector('#menu-item-2') as MenuItem;
+        const menuItem3 = el.querySelector('#menu-item-3') as MenuItem;
+
+        // Test with sp-search
+        searchInput.focus();
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(searchInput);
+
+        await mouseMoveOver(menuItem1);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            searchInput,
+            'sp-search should retain focus on mouseover'
+        );
+
+        await mouseMoveOver(menuItem2);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            searchInput,
+            'sp-search should retain focus on mouseover'
+        );
+
+        // Test with sp-textfield
+        textfieldInput.focus();
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(textfieldInput);
+
+        await mouseMoveOver(menuItem1);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            textfieldInput,
+            'sp-textfield should retain focus on mouseover'
+        );
+
+        // Test with sp-number-field
+        numberInput.focus();
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(numberInput);
+
+        await mouseMoveOver(menuItem2);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            numberInput,
+            'sp-number-field should retain focus on mouseover'
+        );
+
+        // Test with sp-combobox
+        comboboxInput.focus();
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(comboboxInput);
+
+        await mouseMoveOver(menuItem3);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            comboboxInput,
+            'sp-combobox should retain focus on mouseover'
+        );
+
+        // Test with sp-color-field
+        colorInput.focus();
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(colorInput);
+
+        await mouseMoveOver(menuItem1);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            colorInput,
+            'sp-color-field should retain focus on mouseover'
+        );
+
+        // Test with native input
+        nativeInput.focus();
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(nativeInput);
+
+        await mouseMoveOver(menuItem2);
+        await elementUpdated(el);
+        expect(document.activeElement).to.equal(
+            nativeInput,
+            'native input should retain focus on mouseover'
+        );
+    });
 });
diff --git a/tools/base/src/constants.ts b/tools/base/src/constants.ts
diff --git a/tools/base/src/index.ts b/tools/base/src/index.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@spectrum-web-components/menu': minor
 +---
++
 +**Fixed** MenuItem focus stealing from input elements on mouseover by enhanceing MenuItem's `handleMouseover` method to detect when an input element currently has focus and prevent stealing focus in those cases.