Allow user to specify popover direction
DZwell opened this issue · comments
Is your feature request related to a problem? Please describe.
We have a long list of states at the bottom of the page, it doesn't reliably render above the auro-select. When it renders below it, you can see from the below screen shot there is no room on the page and users can't get to the last handful of items in the drop down.
Describe the solution you'd like
A way to explicitly tell the select which direction to open could solve this issue. In my case, telling it to always open "up" would fix this problem. However, after a conversation I had with @jordanjones243 it sounds like this functionality is performed by popperJs, the third party library used by auro-select. I thought I'd file the issue anyway to see if there are other solutions and/or to add visibility to this just in case others also have this issue.
All that being said, the stock HTML <select> doesn't have this issue, even when the browser window is super short:
Describe alternatives you've considered
I've tried playing around with adding/removing overflow-y and modifying the height on some of the containers that hold the form in question but it doesn't fix the issue, it only creates other issues.
Additional context
@DZwell Is there a way to provide a link directly to the page so we can take a closer look? The currency converter has a similar issue that we are addressing this sprint and I'd love to see if that solution would also help this use case.
This one should work until after the departure date of this flight https://mow-qa.alsakaair.com/preorderfood/payment/1-DCA-SEA-2022-11-07/billingaddress?confirmationCode=kuytgz&lastName=tester
If you're still looking at the issue after that I can book another PNR for you to use. If you don't want to mess with signing in you can add a single use payment to get to the billing address screen by clicking the Continue as guest button.
Let me know if you need help reproing.
For some reason I can get that link to work even on the VPN...
In any case we are working on this bug....
If we fix the issue above, you should then be able to set a height on auro-menu along with overflow-y:hidden and then users can scroll through the countries. It doesn't add a fixed option to popperjs to only go above or below but would be a better experience than what it looks like in the screen shots.
We are looking to move all popover functionality to native browser support. We will discuss this option if it is applicable to the new API