fix(useFocusZone): remove suspended active descendant state #1288
Conversation
🦋 Changeset detectedLatest commit: ca0a77e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/primer/primer-components/GYJKdQrv9DHM1dWXZpJbc1FKZ8AY |
.changeset/smart-files-promise.md
Outdated
| "@primer/components": patch | ||
| --- | ||
|
|
||
| Removed "suspended" state from active-descendant focus zones. Active descendant will now be active as soon as the `activeDescendantControl` element is focused, and cannot be deactivated by pressing `esc`. This is a breaking change to `useFocusZone`, but this behavior is still considred to be in `alpha`. |
There was a problem hiding this comment.
Is there a simpler way to explain this change? As someone not familiar with the intricacies of focus zones, this description is a little hard to follow
There was a problem hiding this comment.
Much clearer. Thank you ❤️
Co-authored-by: Cole Bemis <colebemis@github.com>
The
active-descendantvariant of focus zone currently supports a "suspended" state. The zone is suspended upon first creation, and any time the user pressesesc. After further integration of theSelectPanel, it's been determined that we should activate the first descendant immediately, rather than requiring the user to press the down arrow to exit suspended state. To accomplish this goal, I have completely removed the concept of a suspended state. The zone will now remember the last active descendant and activate it immediately when focus moves into theactiveDescendantControlelement. When focus leaves that element, we will keep track of the selected descendant, but "clear" the active descendant state from the control element and inform the consumer that there is no longer an active descendant. If focus returns to the control element, the same descendant will become active again. Further, if one of the descendant elements is focused, the zone will immediately move focus to the control element and set the active descendant to the element that originally received focus. This works great for clicking on items in theSelectPanelAs part of this work, I was able to remove the
subscribeToActiveElementChangescode. This was in place with some assumptions about overlapping zones and a desire to focus descendant elements if the control element didn't have focus. This approach was very complicated and does not appear to have any benefit in our real-world use cases so far. I also added aNestedZonesstory to verify that regular zone behavior works as expected.Finally, I updated the
FilteredActionListrefs to more closely match the setup from the active descendant story. The big difference is that the control input is no longer in the container that is passed to the zone.Closes https://github.com/github/primer/issues/184
Screenshots
CleanShot.2021-06-10.at.16.25.04.mp4
CleanShot.2021-06-10.at.16.23.07.mp4
Merge checklist