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

Sortable list item's action menu don't close correctly after item is reordered #7445

Closed
2 of 3 tasks
sonofflynn89 opened this issue Aug 3, 2023 · 6 comments
Closed
2 of 3 tasks

Sortable list item's action menu don't close correctly after item is reordered #7445

sonofflynn89 opened this issue Aug 3, 2023 · 6 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Hub Issues logged by ArcGIS Hub team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 2 Small fix or update, may require updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2023 December Pri...

Comments

@sonofflynn89
Copy link

Check existing issues

Actual Behavior

<calcite-block> items within a <calcite-sortable-list> have a built in actions menu popover. On initial render, the actions menu works fine. Clicking the toggle opens the popover. The popover can be closed by clicking an action, clicking outside, or clicking the toggle again.

Screen.Recording.2023-08-03.at.5.10.17.PM.mov

However, the moment that a <calcite-block> is reordered, the actions menu breaks. Clicking the toggle still opens the popover, but now the popover will not close after clicking an action or clicking outside. It will only close if the toggle is clicked

Screen.Recording.2023-08-03.at.5.10.55.PM.mov

Expected Behavior

The actions menu popover should close when an action is clicked or the user clicks outside, just like it did on the initial render.

Reproduction Sample

https://codepen.io/sonofflynn89-the-reactor/pen/qBQvEbj

Reproduction Steps

The code pen has them enumerated

Reproduction Version

1.5.0

Relevant Info

No response

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

While flows are not prohibited, it is jarring to see that after an action is clicked, the menu remains open. Our users could have up to 5 of these popovers stuck open at a time unless they know they know that they need to click the toggle button again.

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react

Esri team

ArcGIS Hub
@sonofflynn89 sonofflynn89 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 Aug 3, 2023
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. ArcGIS Hub Issues logged by ArcGIS Hub team members. p3 - want for upcoming milestone labels Aug 3, 2023
@geospatialem geospatialem added discussion Issues relating to a conversation where feedback is optional. design Issues that need design consultation prior to development. labels Aug 21, 2023
@geospatialem
Copy link
Member

For next steps, Calcite should consider:

  • Sorting on components, and
  • Creating a list of components for support, to ensure support is upheld and configurations are sound
    • Design/usability should be considered as part of the list considerations

cc @jcfranco @SkyeSeitz @ashetland

@brittneytewks brittneytewks removed the design Issues that need design consultation prior to development. label Aug 24, 2023
@geospatialem geospatialem assigned driskull and unassigned jcfranco Dec 5, 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 Dec 5, 2023
@geospatialem geospatialem added this to the 2023 December Priorities milestone Dec 5, 2023
@geospatialem geospatialem removed the discussion Issues relating to a conversation where feedback is optional. label Dec 5, 2023
@geospatialem geospatialem mentioned this issue Dec 5, 2023
Open
5 tasks
driskull added a commit that referenced this issue Dec 6, 2023
@driskull
fix(action-menu): fix closing action menu after a drag occurs. #7445
efb004b
@driskull driskull mentioned this issue Dec 6, 2023
Merged
@driskull driskull 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 Dec 6, 2023
driskull added a commit that referenced this issue Dec 6, 2023
@driskull
fix(action-menu): fix closing action menu after a drag occurs (#8339)
dcb8548 
**Related Issue:** #7445

## Summary

- Set autoClose on internal popover
- Remove event listener on window
- Listen for popover close to set `open` property to false.
- Updates existing test. (Already a test to ensure closure of menu when
clicking outside)
@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 Dec 6, 2023
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned driskull Dec 6, 2023
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 6, 2023

Installed and assigned for verification.

@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 2 Small fix or update, may require updates to tests. labels Dec 6, 2023
@DitwanP
Copy link
Contributor

DitwanP commented Dec 8, 2023

Tested locally on main

Results:

  • After sorting, popoverer closes when clicking the toggle.  ✅
  • After sorting, popoverer closes when clicking outside.  ✅
  • After sorting, popoverer closes when clicking the action.  ❌
Screen.Recording.2023-12-08.at.2.30.23.PM.mov

@DitwanP DitwanP added 2 - in development Issues that are actively being worked on. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Dec 8, 2023
@DitwanP DitwanP assigned driskull and unassigned geospatialem and DitwanP Dec 8, 2023
driskull added a commit that referenced this issue Dec 8, 2023
@driskull
fix(action-menu): keep internal popover open property in sync. #7445
ba0af44
@driskull
Copy link
Member

driskull commented Dec 8, 2023

Nice catch @DitwanP! thanks for finding this. PR incoming 🚀

@driskull driskull mentioned this issue Dec 8, 2023
Merged
driskull added a commit that referenced this issue Dec 9, 2023
@driskull
fix(action-menu): keep internal popover open property in sync (#8387)
38dff7c 
**Related Issue:** #7445

## Summary

- Keep open property in sync with open property of internal popover
- Update menu button element when connectedCallback occurs.
- Add test
@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 Dec 9, 2023
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned driskull Dec 9, 2023
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 9, 2023

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Dec 11, 2023

🍰 Verified locally on main

Results:

  • After sorting, popoverer closes when clicking the toggle. ✅
  • After sorting, popoverer closes when clicking outside. ✅
  • After sorting, popoverer closes when clicking the action. ✅
Screen.Recording.2023-12-11.at.12.39.52.PM.mov

@DitwanP DitwanP closed this as completed Dec 11, 2023
@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 Dec 11, 2023
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. ArcGIS Hub Issues logged by ArcGIS Hub team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 2 Small fix or update, may require updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2023 December Priorities
Development

No branches or pull requests
6 participants
@jcfranco @driskull @geospatialem @sonofflynn89 @DitwanP @brittneytewks