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

calcite-action-group - Actions are cut off in Safari when action group has fixed overlay positioning in a panel #8028

Closed
2 of 5 tasks
lboyd93 opened this issue Oct 18, 2023 · 10 comments
Closed
2 of 5 tasks

calcite-action-group - Actions are cut off in Safari when action group has fixed overlay positioning in a panel #8028

lboyd93 opened this issue Oct 18, 2023 · 10 comments
Assignees
@DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. browser-safari Issues tied to the last 2 versions of Safari browser. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - medium Issue is non core or affecting less that 60% of people using the library spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment.
Milestone
2024-06-25 - Jun ...

Comments

@lboyd93
Copy link

lboyd93 commented Oct 18, 2023 •
edited
Loading

Check existing issues

Actual Behavior

In Safari, the grouped actions in the drop down are cut off when expanded.
2023-10-18_11-22-39

Expected Behavior

The grouped actions should not be cut off, but they should overlay the rest of the calcite panel. This is the behavior in Chrome and Firefox.
2023-10-18_11-22-55

Reproduction Sample

https://codepen.io/driskull/pen/MWZNOMR?editors=1000

Reproduction Steps

  1. Open sample in Safari: https://codepen.io/driskull/pen/MWZNOMR?editors=1000
  2. Select the grouped actions drop down. Note it only shows four actions and it's all within the panel.
  3. Open the sample in chrome and repeat step 2. Note all the actions are shown and it overlaps the panel.

Reproduction Version

1.9.2

Relevant Info

macOS 13.6 (22G120)
Safari Version 17.0 (18616.1.27.111.22, 18616)

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

This issue impacts the ArcGIS Online Map Viewer and custom ArcGIS Maps SDK for JavaScript applications used in Safari that utilize popups with many actions. The actions listed at the end of the group will be unusable.

cc @driskull

Example of JS SDK application: https://codepen.io/laurenb14/pen/bGOXayX?editors=1000

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript
@lboyd93 lboyd93 added 0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Oct 18, 2023
@github-actions github-actions bot added p3 - want for upcoming milestone calcite-components Issues specific to the @esri/calcite-components package. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone labels Oct 18, 2023
@driskull
Copy link
Member

This one looks like a Maps SDK issue. I think we can close it.

@driskull driskull reopened this Oct 18, 2023
@driskull
Copy link
Member

Reopening, seems like it does happen in safari within a flow/panel

@geospatialem geospatialem added the browser-safari Issues tied to the last 2 versions of Safari browser. label Oct 18, 2023
@asangma
Copy link
Contributor

asangma commented Oct 24, 2023 •
edited
Loading

I've done some testing.
It seems like it may be coming from the overflow: hidden rule in CalcitePanel.

I have a Codepen in which I turn off the overflow: hidden on Panel and it seems to work.
I'm not sure if it breaks other stuff though.

https://codepen.io/mtb-alan/pen/poGJJaM?editors=0100

asangma added a commit that referenced this issue Oct 25, 2023
@asangma
fix(panel, flowitem): remove overflow rule. Add temporary test demo f…
9c3e29d 
…or action-menu overflow (#8028)
@asangma asangma mentioned this issue Oct 25, 2023
Merged
jcfranco pushed a commit that referenced this issue Nov 10, 2023
@asangma
fix(panel, flow-item): remove overflow rule (#8055)
d0c3ed2 
**Related Issue:** #8028

## Summary
Attempt to fix the clipping of action-menu in Panel and FlowItem.
This adds a test demo to approximate one of the use cases where
the issue is appearing.

I could use some help testing if this update breaks other stuff.
cc @geospatialem
@jcfranco jcfranco added estimate - 3 A day or two of work, likely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library and removed needs triage Planning workflow - pending design/dev review. labels Nov 10, 2023
@jcfranco jcfranco added this to the 2023 November Priorities milestone Nov 10, 2023
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 0 - new New issues that need assignment. labels Nov 10, 2023
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@jcfranco jcfranco assigned asangma and geospatialem and unassigned geospatialem Nov 10, 2023
@geospatialem
Copy link
Member

Reopening from the revert above #8028 (reference)

@geospatialem geospatialem reopened this Feb 15, 2024
@geospatialem geospatialem added the needs triage Planning workflow - pending design/dev review. label Feb 15, 2024
@jcfranco jcfranco added spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed estimate - 3 A day or two of work, likely requires updates to tests. needs triage Planning workflow - pending design/dev review. labels Feb 29, 2024
@jcfranco
Copy link
Member

Confirmed this is still an issue with the latest: https://codepen.io/jcfranco/pen/rNbNKgx?editors=1000.

Here are Matt's findings from the revert PR. 🕵️

@geospatialem geospatialem added this to the 2024-07-30 - Jul Release milestone Apr 3, 2024
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Apr 3, 2024
@geospatialem geospatialem mentioned this issue May 28, 2024
Open
6 tasks
driskull added a commit that referenced this issue May 31, 2024
@driskull
fix(panel): do not cut off menu actions. #8028
b9e6d4b
@driskull driskull self-assigned this May 31, 2024
@driskull driskull added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels May 31, 2024
@driskull driskull mentioned this issue May 31, 2024
Merged
driskull added a commit that referenced this issue Jun 4, 2024
@driskull
fix(panel): prevent menu actions from being clipped in Safari (#9488)
29eb4ce 
**Related Issue:** #8028

## Summary

- do not cut off menu actions
- `position:relative` on the container class within the panel seems to
fix the safari issue. Not sure how we can test this without manual
testing or getting different browser screenshots setup.

@geospatialem @DitwanP could one of you help test this fix?
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Jun 4, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned driskull Jun 4, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 4, 2024

Installed and assigned for verification.

@geospatialem geospatialem removed their assignment Jun 6, 2024
@DitwanP
Copy link
Contributor

DitwanP commented Jun 12, 2024

🍯 Verified locally on dev

Screenshot:
(Safari - Version 17.5)
image

@DitwanP DitwanP closed this as completed Jun 12, 2024
@DitwanP DitwanP 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 Jun 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. browser-safari Issues tied to the last 2 versions of Safari browser. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - medium Issue is non core or affecting less that 60% of people using the library spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment.
Projects
None yet
Milestone
2024-06-25 - Jun Release
Development

No branches or pull requests
6 participants
@jcfranco @driskull @geospatialem @asangma @lboyd93 @DitwanP