Skip to content

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

Open
@Sym-O

Description

@Sym-O

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions