Auro Select: when changing breakpoints from large to small, the select dropdown position is off screen in Chrome, Edge and Firefox browsers

[mlilli]

Describe the bug

When starting in a large breakpoint (i.e. desktop) and switching to a smaller breakpoint that causes significant layout change (main menu is collapsed) then opening a select menu, the dropdown / popover is positioned off screen. Scrolling or closing/reopening the select fixes the position.

To Reproduce

Steps to reproduce the behavior:

• Go here in Chrome, Firefox or Edge browser in a large breakpoint (i.e. desktop, >= 1024px)
• Open dev tools and switch to a small breakpoint (i.e. any small breakpoint <= 575px, such as iPhone SE)
• Click on any select menu.
• See error

Expected behavior

The dropdown should be fully on screen and anchored to the opener / trigger.

Screenshots

Desktop (please complete the following information):

• OS: Windows and macOS
• Browser: Chrome, Edge and Firefox
• Version: all

Smartphone (please complete the following information):

• Device: N/A
• OS: N/A
• Browser N/A
• Version N/A

Additional context

This affects an alaskaair.com PR with the latest (patched) versions of auro-select (v3.3.1), auro-dropdown (v3.2.1) and auro-menu (v.4.2.0), when switching to <= 767px.

Repo: https://github.com/Alaska-ECommerce/flightsearch-lem-svelte/
PR: https://github.com/Alaska-ECommerce/flightsearch-lem-svelte/pull/2441

[jordanjones243]

Issue will be fixed by this PR and a version bump will be required:

• Add resizeObserver to trigger popper update #270 auro-dropdown#271