Combobox floating-ui does not update its position when overlayPosition is fixed

[nCastle1]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When the combobox scrolls/moves while the dropdown is open, the dropdown floats away from the input.

Screen.Recording.2024-02-08.at.1.24.52.PM.mov

Expected Behavior

I expect the combobox dropdown to stick to the input, like it did in a previous release. This matches the behavior of input-date-picker with the same overlayPositioning setting.

Screen.Recording.2024-02-08.at.1.32.15.PM.mov

Reproduction Sample

https://gist.github.com/nCastle1/a290f6ef4cb47cebcc37840d0c3ff122

Reproduction Steps

Place combobox in scrollable container, open combobox, scroll.

Reproduction Version

2.4.0

Relevant Info

Tested with Edge on macOS.

I noticed that the main difference between how input-date-picker does it and how combobox does it is on this line: https://github.com/Esri/calcite-components/blob/9eb680a5045e142d6db4c1d971c69961a73a44ee/packages/calcite-components/src/components/combobox/combobox.tsx#L960

input-date-picker wraps this in requestAnimationFrame():

requestAnimationFrame(() => connectFloatingUI(this, this.referenceEl, this.floatingEl));

I tested locally and that fixed the issue.

Regression?

Yes

Priority impact

p4 - not time sensitive

Impact

Can be worked around using the reposition method and monitoring for scroll on containers, but the workaround is clunky.

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 Maps SDK for JavaScript

[jcfranco]

Used the provided repro case and dug a bit. This started happening in @esri/calcite-components@2.2.0-next.1. The only thing that looks suspicious from the diff between v2.2.0-next.0 and v2.2.0-next.1 is b15c052.

[dFranz2]

I ran into the same issue with overlayPositioning="fixed" when using the Dropdown component in development.

When trying to reproduce the issue in a codepen I noticed overlayPositioning="fixed" worked as expected but overlay-positioning="fixed" did not work as expected (list items 1 and 3 in the codepen)

Codepen: https://codepen.io/dmap/pen/vYMXjam

[amring1]

Any chance we can escalate getting a fix for this? It affects a lot of different places within analysis workflows, including the new ModelBuilder web experience

[jcfranco]

@geospatialem Bumping priority on this one. I'll pick up this spike next week and will provide a more accurate estimate/timeline for this.

[driskull]

@jcfranco I think #8973 may fix this one as well.

[Horiatu]

This also happens in one of our project with:
"dependencies": {
"@arcgis/core": "^4.29.10",
"@esri/calcite-components-react": "^2.6.0",

(The Municipality CalciteCombobox has been expanded and the host panel is scrolled using the mouse wheel.)

[jcfranco]

@nCastle1, @amring1, @Horiatu Would you mind testing with @next? As Matt suggested, #8973 seems to have fixed this. At least @dFranz2's repro case.

[nCastle1]

I tested and confirmed this fixes the issue for Maps SDK for JS's FeatureForm and Editor widgets.

[jcfranco]

@nCastle1 Thanks for testing! Closing as verified based on ☝️.