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

[nCastle1]

Check existing issues

• [X] 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.

https://github.com/Esri/calcite-design-system/assets/29742178/0434b065-644c-4a1b-85c8-75bf025f1fff

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.

https://github.com/Esri/calcite-design-system/assets/29742178/4486c723-fbc2-4f13-a83d-2aba872075df

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

• [X] @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 b15c052335b3c3bcba01cd3a0ec2dfe03588959c.

[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 https://github.com/Esri/calcite-design-system/pull/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 ☝️.