adobe / adobe/spectrum-web-components

[Bug]: menuitem submenus are not visible on mobile

Open
#5,076 1 comment 0 reactions 0 assignees View on GitHub
bug Component:Action menu Component:Menu SEV 1
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, menu, action menu

### Expected behavior

When opened, submenus should be visible on mobile.

### Actual behavior

When opened, submenus are offscreen.

### Screenshots

Image
Image

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

_No response_

### How can we reproduce this issue?

1. On mobile or using the web inspector to toggle mobile device preview, go to https://opensource.adobe.com/spectrum-web-components/storybook/iframe.html?args=&id=action-menu--submenu&viewMode=story
2. Open the **Select some items** submenu.
**_3. The submenu and its menu items are outside of the viewport._**
4. On mobile or using the web inspector to toggle mobile device preview, go to https://opensource.adobe.com/spectrum-web-components/storybook/iframe.html?args=&id=menu-submenu--submenu&viewMode=story
5. Toggle the menu closed.
6. Reopen the menu.
7. Open the **Brooklyn** submenu.
**_8. The submenu and its menu items are outside of the viewport._**

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

_No response_

### Severity

None

### Logs taken while reproducing problem

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue in the two linked Storybook stories, action-menu--submenu and menu-submenu--submenu, using mobile device preview. Inspect the menuitem, menu, and action menu implementation involved in those stories; done means both the Select some items and Brooklyn submenus, including their menu items, remain within the mobile viewport when opened and reopened.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.