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

[Dialog] When overlay-position="fixed" and menu-open is present the menu is not positioned as-expected #9876

Closed
2 of 6 tasks
geospatialem opened this issue Jul 29, 2024 · 3 comments
Closed
2 of 6 tasks

[Dialog] When overlay-position="fixed" and menu-open is present the menu is not positioned as-expected #9876

geospatialem opened this issue Jul 29, 2024 · 3 comments
Assignees
@geospatialem @DitwanP
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. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - low Issue is non core or affecting less that 10% of people using the library
Milestone
2024-07-31 - Jul ...

Comments

@geospatialem
Copy link
Member

geospatialem commented Jul 29, 2024 •
edited
Loading

Check existing issues

Actual Behavior

When overlay-position="fixed" and menu-open is present the menu is not positioned as-expected:
image

Expected Behavior

The menu should be placed as-expected on the component (where it is initially loaded):

image

Reproduction Sample

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

Reproduction Steps

  1. Open the sample
  2. Observe the menu opens as-expected
  3. However, it is repositioned in a different location

Reproduction Version

2.11.0-next.25

Relevant Info

Spurred from #7886 QA/QC

Regression?

No response

Priority impact

impact - p1 - need for current milestone

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

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 Jul 29, 2024
@github-actions github-actions bot added Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone labels Jul 29, 2024
@geospatialem geospatialem mentioned this issue Jul 29, 2024
Closed
9 tasks
@geospatialem geospatialem added p - low Issue is non core or affecting less that 10% of people using the library estimate - 3 A day or two of work, likely requires updates to tests. 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Jul 29, 2024
@geospatialem geospatialem added this to the 2024-08-27 - Aug Release milestone Jul 29, 2024
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Jul 29, 2024
@driskull
Copy link
Member

This appears to be a an issue with the transform animation on the dialog. If we remove that, it works fine.

The issue is that having a transform animation with a floating-ui element inside of it can cause positioning issues.

Some notes about it can be read here: https://floating-ui.com/docs/usefloating#transform

In our case, a wrapper won't work because the floating ui element is inside of the transform animation.

As a workaround, I could disable the animation if the menu-open attribute is present. WDYT @jcfranco?

driskull added a commit that referenced this issue Jul 30, 2024
@driskull
fix(dialog): fix menu positioning when when overlayPositioning is 'fi…
6625d8c 
…xed' and menuOpen is true. #9876
@driskull driskull mentioned this issue Jul 30, 2024
Merged
@geospatialem geospatialem added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Jul 30, 2024
driskull added a commit that referenced this issue Jul 30, 2024
@driskull
fix(dialog): fix menu positioning when when overlayPositioning is 'fi…
6911682 
…xed' and menuOpen is true (#9891)

**Related Issue:** #9876

## Summary

- This corrects an issue with the transform animation on the dialog.  
- The issue is that having a transform animation with a floating-ui
element inside of it can cause positioning issues.
- Some notes about it can be read here:
https://floating-ui.com/docs/usefloating#transform
- In our case, a wrapper won't work because the floating ui element is
inside of the transform animation.
- As a workaround, the transform animation is removed when menuOpen is
true.
@driskull driskull 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 Jul 30, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned driskull Jul 30, 2024
@DitwanP
Copy link
Contributor

DitwanP commented Jul 30, 2024

🍡 Verified locally on dev

@DitwanP DitwanP closed this as completed Jul 30, 2024
@geospatialem geospatialem added 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 Jul 30, 2024
calcite-admin pushed a commit that referenced this issue Jul 30, 2024
@driskull @github-actions
fix(dialog): fix menu positioning when when overlayPositioning is 'fi…
4390177 
…xed' and menuOpen is true (#9891)

**Related Issue:** #9876

## Summary

- This corrects an issue with the transform animation on the dialog.  
- The issue is that having a transform animation with a floating-ui
element inside of it can cause positioning issues.
- Some notes about it can be read here:
https://floating-ui.com/docs/usefloating#transform
- In our case, a wrapper won't work because the floating ui element is
inside of the transform animation.
- As a workaround, the transform animation is removed when menuOpen is
true.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

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. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - low Issue is non core or affecting less that 10% of people using the library
Projects
None yet
Milestone
2024-07-31 - Jul Release
Development

No branches or pull requests
3 participants
@driskull @geospatialem @DitwanP