Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Floating UI issues with Tree and Dropdown #6300

Closed
geospatialem opened this issue Jan 17, 2023 · 7 comments
Closed

Floating UI issues with Tree and Dropdown #6300

geospatialem opened this issue Jan 17, 2023 · 7 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. floating ui Issues related to floating UI has workaround Issues have a workaround available in the meantime.
Milestone
2023 February Pri...

Comments

@geospatialem
Copy link
Member

geospatialem commented Jan 17, 2023 •
edited by alisonailea
Loading

Actual Behavior

The first tree-item has the expected floating UI behavior, but subsequent tree-items placement looks off that surfaced while verifying #5168 cc @anveshmekala

1__212780237-ea5ab162-0128-45cd-bf3b-34c433228b7f

Expected Behavior

The Dropdown item should be present in line with its parent Dropdown, similar to the first item.

Reproduction Sample

https://codepen.io/geospatialem/pen/QWBqWeN

Reproduction Steps

Open the Codepen sample
Select the first dropdown and observe the dropdown-item's placement (as-expected)
Select either the second or third dropdown and observe the behavior of the dropdown-item's placement
2__213015711-9d144bcd-b15f-4227-83dc-7e7a6a642c3f

Reproduction Version

next.726

Relevant Info

Applicable to Chrome and Edge browsers in the latest version (Version 109.0.5414.74 (Official Build) (64-bit)).

Firefox is not affected.

Regression?

beta.94

Impact

High

Esri team

Calcite (dev)
@geospatialem geospatialem added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jan 17, 2023
@github-actions github-actions bot added the Calcite (dev) Issues logged by Calcite developers. label Jan 17, 2023
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jan 17, 2023
@geospatialem geospatialem added this to the 2023 January Priorities milestone Jan 17, 2023
@ethanbdev
Copy link
Contributor

ethanbdev commented Jan 19, 2023 •
edited
Loading

Oh nice - I noticed this issue and was just about to open one.

If its helpful, I found this issue did not reproduce on chrome v108 🤷

Here was my codepen anyway, if you add overlayPositioning = "fixed" the problem goes away: https://codepen.io/eborgen/pen/vYaWgoz?editors=1010

It is happening in the viewer a few too:
image
image

cc: @AdelheidF

@jcfranco
Copy link
Member

@ethanbdev Interesting. Thanks for sharing the browser version info. I'm wondering if we should hold off on this to see if it gets fixed in a future Chrome version.

@jcfranco jcfranco added the has workaround Issues have a workaround available in the meantime. label Jan 20, 2023
@benelan benelan added 0 - new New issues that need assignment. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Jan 20, 2023
@benelan benelan removed their assignment Jan 20, 2023
@geospatialem
Copy link
Member Author

Moving to the February 2023 milestone per Franco's note above regarding checking for a potential fix in a future Chrome/Edge browser update.

@atomiks
Copy link

atomiks commented Jan 25, 2023

It's not Chrome's bug per se, they're now adhering to the spec.

From what I remember, @jcfranco patched Safari and Firefox, but not Chrome (or just 109+ now needs to be checked and patched)

@claviska claviska mentioned this issue Jan 26, 2023
Closed
@jcfranco
Copy link
Member

jcfranco commented Feb 24, 2023 •
edited
Loading

@atomiks Thanks for chiming in! I'll apply the patch to Chrome 109+ as suggested.

On a related note, would you recommend using the polyfill shared in floating-ui/floating-ui#2160? We'll make sure to test the special cases that have come up, but wanted to get your thoughts on any potential polyfill testing so far. Suggested polyfill from linked issue won't work, but found a promising alternative (see floating-ui/floating-ui#2160 (comment)).

@jcfranco jcfranco self-assigned this Feb 24, 2023
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Feb 24, 2023
@jcfranco jcfranco mentioned this issue Feb 24, 2023
Merged
jcfranco added a commit that referenced this issue Feb 28, 2023
@jcfranco
fix: apply offsetParent polyfill for Chrome 109+ (#6520)
ba8c068 
**Related Issue:** #6300 

## Summary

This addresses positioning issues in Chrome 109+. Version 109 updated
offsetParent behavior to follow the latest spec changes from
w3c/csswg-drafts#159.
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Feb 28, 2023
@github-actions github-actions bot assigned geospatialem and unassigned jcfranco Feb 28, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added floating ui Issues related to floating UI 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Mar 1, 2023
@geospatialem
Copy link
Member Author

Verified in 1.0.8-next.3

verify-tree-dropdown-floatingui

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. floating ui Issues related to floating UI has workaround Issues have a workaround available in the meantime.
Projects
None yet
Milestone
2023 February Priorities Patch (1.0.8...
Development

No branches or pull requests
6 participants
@jcfranco @alisonailea @geospatialem @benelan @atomiks @ethanbdev