Auro Select's Dropdown displays wonky inside Auro Dialog

[dkt2]

Describe the bug

Putting an Auro Select inside an Auro Dialog seems to mess with the calculations used to display Auro Select's Dropdown

To Reproduce

Steps to reproduce the behavior:

1. Create a component with an Auro Select inside an Auro Dialog
2. Click on the Auro Select
3. Scroll the Auro Dialog up-and-down
4. Auro Select's Dropdown moves up-and-down

Expected behavior

A reasonably fixed position for Auro Select's Dropdown durable through scrolling events

Screenshots

auro-select-inside-auro-dialog-2-2.mov

Desktop (please complete the following information):

• OS: Mac OS
• Browser Chrome
• Version 124.0.6367.119 (Official Build) (arm64)

[Patrick-Daly-AA]

from initial assessment, this issue will probably need a code change in Auro-Dropdown to fix

[dkt2]

@Patrick-Daly-AA would you know how long the fix would take? It is being used as part of our LMS work so it is a high priority item for us

[Patrick-Daly-AA]

@dkt2 at the moment we aren't sure. We have a chunk of work in our backlog to replace popperJS with the native PopOver implementation that is now supported across all our supported browsers. We're looking to see how soon we will be able to get that work in, and if that will be too long we can fix this sooner.

Tagging @braven112 for visibility.

[Patrick-Daly-AA]

@dkt2 Our work to implement native popover is being tracked here: AlaskaAirlines/auro-dropdown#239 It's third on our list of major priorities behind color theming and a new component called Multi-select. This puts the change-over to Native Popover at least a month out.

Are there other workarounds that you can try in the mean time? If not, please contact @braven112 and we can work to coordinate a one-off fix sooner.

[Dayna-A]

@braven112 we don't have a nice workaround that doesn't involve corrupting the designs & significant rework... can you halp?

@jason-capsule42

[dkt2]

Hi @braven112 (cc @Patrick-Daly-AA @blackfalcon),

I found a similar problem with Auro DatePicker

Screen.Recording.2024-05-16.at.9.24.25.AM.mov

It seems like a highly related problem to the Auro Select

[braven112]

Hi @braven112 (cc @Patrick-Daly-AA @blackfalcon),

I found a similar problem with Auro DatePicker

Screen.Recording.2024-05-16.at.9.24.25.AM.mov
It seems like a highly related problem to the Auro Select

Thanks for the extra example. We are pretty sure the issue is a conflict with auro-dropdown and auro-dialog. The positioning of auro-dialog seems to be overwriting the positioning for any component that has a dropdown.

This issue never appears when an auro-dropdown component is used directly on the page, only when it is inside an auro-dialog.

[fajar-apri-alaska]

Hi team,

Ok, so tl:dr I have one "hacky" solution:

1. have position: relative applied to auro-select outer div

2. also apply transform value for the .popover class inside the auro-dropdown itself like so:

.popover {
  // the `!important` is needed to overwrite the computed value coming from the popperJS itself.
  transform: translate(0) !important;
}

This will result in acceptable behavior, I think.

Screen.Recording.2024-05-28.at.15.09.44.mov

But sadly, we can't apply above solution from the light DOM of the consumer apps itself. So updates on both components (auro-select and auro-dropdown) are needed for this temporary solution.