adobe / adobe/react-spectrum

[ComboBox] Custom value & mobile Xp - Menu remains in the way

Open
#8,432 2 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

Hi !
I'm using a combobox to add tags to an item. Custom value are welcomed as new tags may be added by users. A button right next to the combobox is doing the "add action" : connect item to an existing tag or create a new tag (if custom value) & connect item to it.
No problem on desktop.
On mobile, combobox menu is triggered all over the screen to suggest combobox filtered results. In case of a custom value, no result is displayed, the menu remains open and the custom value is in the text field.
There is the issue, there is no way to access the "add Button" as the menu is over the whole screen.
Only solution now is for the user to think about touching the thin upper part of the screen to close the menu and then access the button to do action. It's a bad User experience.

### 🤔 Expected Behavior?

On mobile, I guess that if custom value is set (no results in the search) the menu should automatically close. Or a close menu button should appear.

### 😯 Current Behavior

In case of custom value on mobile : Menu remains open; no result is shown ; almost all the screen is covered by the useless combobox menu ; no access to eventual submit button

### 💁 Possible Solution

On mobile, I guess that if custom value is set (no results in the search) the menu should automatically close. Or a close menu button should appear.

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

just reproduce it on the react spectrum page :
https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#custom-value
mobile view, type a custom value and think about how to access a submit button...

### Version

3.40.1

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

Firefox

### If other, please specify.

_No response_

### What operating system are you using?

Linux

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.