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

[Action Bar] "Stray" clicks on Action Bar focus bottom action / toggle / first action #6462

Closed
macandcheese opened this issue Feb 13, 2023 · 4 comments
Closed

[Action Bar] "Stray" clicks on Action Bar focus bottom action / toggle / first action #6462

macandcheese opened this issue Feb 13, 2023 · 4 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 (design) Issues logged by Calcite designers. estimate - 2 Small fix or update, may require updates to tests. p - low Issue is non core or affecting less that 10% of people using the library
Milestone
2023 July Priorities

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Feb 13, 2023 •
edited
Loading

Actual Behavior

I noticed this in the documentation site app, but it seems to happen in our plain component setup as well.

If there are no bottom-actions, the toggle button gains focus.

If there are no bottom-actions and expandDisabled (so no expand toggle), the first item in the action bar is focused.

This video shows the issue both in the app itself and the action bar sample:

Screen.Recording.2023-02-13.at.11.29.35.AM.mov

Expected Behavior

I would not expect a "stray" click on the Action Bar to focus the first bottom-actions action, the expand toggle, or the first action.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/dyqbrOz?editors=100

Reproduction Steps

  1. Go to Codepen
  2. Click the "empty space" between the top and bottom actions.

Reproduction Version

1.0.5

Relevant Info

No response

Regression?

No response

Impact

No response

Esri team

Calcite (design)
@macandcheese macandcheese 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 Feb 13, 2023
@github-actions github-actions bot added the Calcite (design) Issues logged by Calcite designers. label Feb 13, 2023
@macandcheese macandcheese changed the title [Action Bar] Clicks on Action Bar focus bottom action / collapse toggle [Action Bar] "Stray" clicks on Action Bar focus bottom action / toggle / first action Feb 13, 2023
@geospatialem geospatialem added research Issues that require more in-depth research or multiple team members to resolve or make decision. p - low Issue is non core or affecting less that 10% of people using the library labels Apr 18, 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 Apr 18, 2023
@geospatialem
Copy link
Member

Research to be conducted to determine a time estimate for an upcoming milestone.

@macandcheese
Copy link
Contributor Author

Potential css-only fix: Adjust flex / margin on the bottom action group elements to not fill available space.

@driskull driskull assigned macandcheese and unassigned driskull Apr 18, 2023
@geospatialem geospatialem added estimate - 2 Small fix or update, may require updates to tests. and removed research Issues that require more in-depth research or multiple team members to resolve or make decision. labels Apr 18, 2023
@geospatialem geospatialem added 0 - new New issues that need assignment. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Jun 26, 2023
@anveshmekala anveshmekala self-assigned this Jul 10, 2023
@anveshmekala anveshmekala added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Jul 10, 2023
@anveshmekala anveshmekala mentioned this issue Jul 11, 2023
Merged
@anveshmekala anveshmekala 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 11, 2023
anveshmekala added a commit that referenced this issue Jul 12, 2023
@anveshmekala
fix(action-bar): no longer delegates focus when clicked on non-focusa…
1a9c15c 
…ble region (#7310)

**Related Issue:** #6462 

## Summary

This PR will fix focusing `calcite-action` in `calcite-action-bar` when
user clicks on non-focusable area. Neither the collapse button nor
slotted `calcite-action` will be focused when clicked on non-focusable
area.
@anveshmekala anveshmekala 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 12, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@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 24, 2023
@geospatialem
Copy link
Member

Verified in 1.5.0-next.25

This was referenced Oct 9, 2024
Merged
Open
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 (design) Issues logged by Calcite designers. estimate - 2 Small fix or update, may require updates to tests. p - low Issue is non core or affecting less that 10% of people using the library
Projects
None yet
Milestone
2023 July Priorities
Development

No branches or pull requests
5 participants
@driskull @alisonailea @macandcheese @geospatialem @anveshmekala