[calcite-dropdown] odd behavior when inside a scrollable container

[rpanichakit9541]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

calcite-dropdown is not shown correctly when it's started as opened below the fold inside a scrollable container. If I click the button at this point nothing will happen, the dropdown will open if I click it a second time. A side note, if I scroll the container after the dropdown shows up it will stay fixed in that position even if I scrollwheel the trigger button out of view.

Expected Behavior

• The dropdown should display as opened correctly even if it's started out of view inside a scrollable container
• The dropdown should stay together with the trigger button when I use the mousewheel to scroll the container

Reproduction Sample

https://codepen.io/rpanichakit/pen/vYPRVQN?editors=1000

Reproduction Steps

1. open the Codepen link https://codepen.io/rpanichakit/pen/vYPRVQN?editors=1000
2. scroll the div with the orange background down to the bottom
3. observe that the dropdown is not shown even though it has open prop set
4. click the trigger button once and see that nothing happens
5. click the trigger button again and see the dropdown shows up
6. use the mousewheel to scroll the div up and down to see the dropdown stay put while the trigger scrolls away.

Reproduction Version

2.4.0

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[driskull]

If we call connectFloatingUI again in componentDidLoad this seems to be fixed.

We would probably need to do that for all FloatingUI components so that these scrolling listeners are setup correctly. We need to maintain the call in connectedCallback as well for when an element is just moved in the DOM.

@jcfranco if this sounds good I can proceed.

since connectFloatingUI is also called when the reference and floating elements are created, maybe we should debounce the call to connectFloatingUI as well?

[github-actions]

cc @geospatialem, @brittneytewks

[jcfranco]

Assigning to this milestone as @driskull has a PR ready. cc @geospatialem

[github-actions]

Installed and assigned for verification.

[DitwanP]

Verified on 2.7.0-next.14

@jcfranco @driskull
Note: the behavior mentioned in the issue is resolved but I want to bring attention to the clunky visuals that happen when scrolling up. Not sure if there's anything we can do about it but in case there is, here's a video:

Screen.Recording.2024-03-22.at.1.29.13.PM.mov