calcite-block / calcite-sortable-list: Avatars fly in from left on Mac

[AdelheidF]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

Using Chrome on Mac when reordering calcite-blocks avatars fly in from the left. It's fine on Windows.

Video that shows the issue here: https://github.com/Esri/calcite-design-system/assets/44481292/6c37d88a-fc0a-4188-a636-663a37fb57e2

Matt discovered that it has something to do with the calcite-dropdown on the block headers.

cc @driskull

Expected Behavior

Same behavior on Mac and Windows.

Reproduction Sample

https://codepen.io/afreitag/pen/eYKweaz

Reproduction Steps

Reorder blocks on right panel.

Reproduction Version

1.9.1

Relevant Info

Mac, Chrome

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

medium

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-react
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Map Viewer

[driskull]

This is because the calcite-dropdown's overlayPositioning is fixed and the dropdown menu is originally positioned in the top left corner because of this. When you drag the element, the whole element (including the menu which is in the top left corner) is being dragged.

If you open the dropdown and then drag everything works fine because the component is now positioned correctly.

1. One solution is to remove the open check here so that the component is positioned correctly even when not open yet: https://github.com/Esri/calcite-design-system/blob/8ea00eccee8ee6c40b0a1ae9992beb575247532f/packages/calcite-components/src/utils/floating-ui.ts#L424-L426
2. Another solution is to make sure the menu is display:none when not opened by adding that here. This may have unintended consequences though. https://github.com/Esri/calcite-design-system/blob/8ea00eccee8ee6c40b0a1ae9992beb575247532f/packages/calcite-components/src/utils/floating-ui.ts#L484-L492

CC @jcfranco for potential other solutions.

[jcfranco]

@driskull Summing up our convo:

We can try solution 1 and test it out. Since floating-ui fixed perf in shadow DOM, I think we could always position it now. I believe this was the way it worked before the perf issue.

[github-actions[bot]]

Installed and assigned for verification.

[AdelheidF]

I created a codepen with the fix https://codepen.io/afreitag/pen/KKbjMYL

On Windows I can see the shadow of the avatar too far to the left on the second drag or any drag after that.

[driskull]

It looks like the popover (used within calcite-dropdown) needs to call reposition() on connectedCallback. Its only calling it on componenDidLoad().

Probably other components that have floating UI should do the same. We can reopen this one for me.

[geospatialem]

@driskull Reassigned back to you, targeted for later this month.

[driskull]

I need to research this a bit more. Once a drag happens the dropdown within the item is not repositioned correctly. Need to figure out why or what else we can do to get the position updated.

[driskull]

Looked into this one a bit more. Seems like the positioning being calculated by floating-ui would be correct if the overlayPositioning was absolute. For some reason, when dragging the calculated position that gets computed is invalid for "fixed" but would be valid if the overlayPositioning was absolute.

Its as if its ignoring the fixed positioning after being dragged.

I can get it to position correctly if I set a timeout in the Dropdown's reposition method but nothing else has worked so far.

@jcfranco do you want to take a shot at it?

[jcfranco]

Thanks for the breakdown! 👨‍🔬🔬

@jcfranco do you want to take a shot at it?

I could look at this once I clear some items from my queue. Might be late in the week though.

Triage-wise, could you add an estimate and priority for this? cc @brittneytewks @geospatialem

[driskull]

Added estimate.

[jcfranco]

@driskull Is this only affecting Windows? If not, can you share some info on how to reproduce? I don't see the issue with the above repro examples.

[driskull]

@jcfranco repro steps

1. Open the codepen
2. Drag "Block B" in front of "Block A"
3. Notice how the positioning flys in from the right.
4. This only happens when there's a hidden floating ui inside the "Block B" or whatever. The floating ui positioning throws off the drag and drop.

[driskull]

Its affecting me on Mac, I havent' tested on windows but I would assume its an issue there as well.

[driskull]

Opened this one since its related: https://github.com/Esri/calcite-design-system/issues/8214

[geospatialem]

Its affecting me on Mac, I havent' tested on windows but I would assume its an issue there as well.

@driskull Tested with Windows in Chrome, FF, and Safari and wasn't able to reproduce, so this appears to be specific to Mac.

[jcfranco]

@driskull Thanks! I see the issue now.

On Windows I can see the shadow of the avatar too far to the left on the second drag or any drag after that.

Not sure which steps I tried initially, but I can reproduce solidly now by following this key step (emphasis mine)☝️.

[driskull]

@jcfranco I think the root cause of all this is #8214

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

Verified locally on Main

https://github.com/Esri/calcite-design-system/assets/60022782/ecd4d2c0-23ca-4451-82e5-565e96504406

[AdelheidF]

looks good to me too. Thanks!