Auro select doesn't handle long values on a mobile device well

AlaskaAirlines / auro-menu

Custom element that provides a list of options for the user to choose from

https://auro.alaskaair.com/components/auro/menu

Apache License 2.0

2 stars 3 forks source link

Auro select doesn't handle long values on a mobile device well #165

Closed DZwell closed 5 months ago

DZwell commented 2 years ago

Describe the bug

When an extra long value is inside auro-select on a mobile device the select overflows its container.

To Reproduce

Put a really long value in the select,
Toggle on the mobile device emulator in dev tools in your browser of choice
Scroll to the side.

Expected behavior

Maybe ellipsize the value? This decision would be better made by a UX/UI designer.

Screenshots

long-value-in-select

Desktop (please complete the following information):

Browser [Firefox, mobile safari]

auro-menu: 3.9.2 auro-select: 2.5.5 auro-dropdown: 2.9.1

blackfalcon commented 1 year ago

This is validated in the doc site. We will review this in an upcoming refinement with the team. The assumed solution is to allow for truncating the content with an ellipse much like we did with this auro-input release

blackfalcon commented 1 year ago

This issue needs to be reviewed by @leeejune and the other UI Designers in order to come up with a solution that fits the element.

We moved this from auro-select to menu as we assume that is where the issue REALLY is. Also, there is nothing to say that this same issue will not happen with auro-combobox as well.

@leeejune please consult wth @jason-capsule42 in order to come to a design resolution for this issue and then we can move this to official refinement with @Lewisfuuh

leeejune commented 1 year ago

Currently @jdeeezzy is working on a mobile version of dropdown to resolve issues like this.

Work will be tracked here:

https://github.com/AlaskaAirlines/auro-select/issues/148

blackfalcon commented 1 year ago

Moving to backlog. This issue will be reviewed once the new design spec has been completed.

blackfalcon commented 6 months ago

@fajar-apri-alaska can you validate if this is still an issue or not?

-- Thanks!

fajar-apri-alaska commented 6 months ago

Per latest version (2.10.1), it is currently still an issue per below video:

https://github.com/AlaskaAirlines/auro-menu/assets/124668226/73f0fc69-6f87-44c6-8860-a1db0ecf9410

Following above conversations, I only found the latest blueprint, but couldn't find mentioned case in any.

One solution maybe by:

adding position: relative to auro-dropdown host, also
adding max-width: -webkit-fill-available // or 100% maybe will work to the auro-dropdown popover wrapper

Please advise, thank you.