adobe / adobe/spectrum-web-components

[Bug]: Focus is removed from Searchbox when interacting with menu items

Open
#5,649 1 comment 0 reactions 0 assignees View on GitHub
bug Component:Menu SEV 1 triage
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [x] I agree to follow this project's code of conduct.

### Impacted component(s)

MenuItem

### Library version

1.4.0 and after

### Expected behavior

MenuItem should not steal focus from the Searchbox when interacting with the menu items.

### Actual behavior

Currently, when a user interacts with the menu—such as navigating through options or performing a selection—the focus is unexpectedly shifting away from the Searchbox to the MenuItem.

### Screenshots

https://github.com/user-attachments/assets/80ad7cfb-7490-4f1d-8d22-9ecfbda45dd0

### What browsers are you seeing the problem in?

Firefox, Chrome, Safari

### How can we reproduce this issue?

1. Go to https://stackblitz.com/edit/vitejs-vite-ascdqv3p?file=src%2Fmy-element.ts
2. Click on Search
3. Move away from Search and hover on menu items
4. Search looses focus

### Sample code or abstract reproduction which illustrates the problem

In `MenuItem.ts` The below event is stealing the focused state.
```ts
handleMouseover(event: MouseEvent): void {
const target = event.target as HTMLElement;
if (target === this) {
this.focus();
this.focused = false;
}
}

```

### Severity

SEV 3

### Logs taken while reproducing problem

_No response_

### Would you like to track this issue in Jira?

- [ ] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

Start in MenuItem.ts at handleMouseover and reproduce the behavior using the linked StackBlitz example: focus Search, then move over menu items. Check the behavior across the reported browsers and verify that interacting with menu items no longer moves focus away from the Searchbox.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.