search

AlaskaAirlines / auro-dialog

Custom element that displays additional information over page content
https://auro.alaskaair.com/components/auro/dialog
Apache License 2.0
0 stars 0 forks source link

Popover and dropdown content is cut off inside of Dialog #20

Open ethanwmiller opened 2 weeks ago

ethanwmiller commented 2 weeks ago

Please verify the version of auro-dialog you have installed

1.0.9

Please describe the bug

Inside of a dialog, the content of a popover that exceeds the boundaries of the dialog is cut off. Also, if a dropdown is expanded inside of the dialog, you have to scroll to see the contents of the dropdown, which is not a good user experience.

Reproducing the error

  1. Go to the auro documentation site: https://auro.alaskaair.com/components/auro/dialog/api
  2. Click on the "Open dialog with popover" example
  3. Hover over the popover trigger
  4. See that the popover is cut off by the edge of the dialog
  5. Type the letter "a" into the text input so that a dropdown of suggestions appears
  6. See that the dropdown is hidden and requires scrolling to see

Expected behavior

The popover text should be completely visible, not cut off by the dialog. Additionally, the dropdown shouldn't require scrolling to see the options. (Included a screenshot from my team's app where this is happening, but the same behavior happens on the doc site)

Screen Shot 2024-08-28 at 3 14 51 PM Screen Shot 2024-08-28 at 4 55 26 PM

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

Additional context

The doc site appears to still be on version 1.0.8, but I tested version 1.0.9 locally and saw the same problem

Exit criteria

No response

Patrick-Daly-AA commented 1 week ago

This is likely to be fixed with the implementation of Native popover: https://github.com/AlaskaAirlines/auro-dropdown/issues/239

Will continue conversations to determine if this needs any other work or "quick fix" to try to address this issue sooner.