Repository navigation
fix(Tabs): Home/End, one key manager, navigate and select by key - #306
Merged
Merged
Conversation
- Home/End move focus to and select the first/last enabled tab; onKeyDown passed only the arrows to the key manager - one FocusKeyManager on the tabs signal, destroyed with the list; was a new manager and change subscription per tab list or direction change (4 managers, 0 destroyed after a render, two list changes and a direction change); direction read at keydown - keys start from the tab holding the event target: arrows no longer drift after a click or an external activeItemKey; keys from non-tab elements in the list are left alone - a tab is selected when activeItemKey === itemKey whatever its disabled state, as in vanilla, React and Vue: a disabled selected tab stays active and aria-selected and its panel stays shown; the panel no longer hides every panel after a click, a tab list change no longer moves the key off a disabled selected tab - without a key the list selects the first enabled tab, or the first tab when all are disabled
xidedix
added a commit
that referenced
this pull request
Oct 19, 2026
- fix(alert): hide and emit `visibleChange` when there is no opacity transition (#304) - fix(carousel): measure each swipe from its own touchstart (#303) - fix(collapse.directive): emit `visibleChange` and `collapseChange` when `animate` is false (#292) - fix(dropdown): mirror the menu placement in a right-to-left context (#299) - fix(dropdown, modal, offcanvas): Escape in an open dropdown leaves the container open (#298) - fix(shadow-on-scroll.directive): changing `cShadowOnScroll` drops the old shadow class and scroll listener (#292) - fix(sidebar): apply input changes after first render, scope state actions to their sidebar (#307) - fix(sidebar-nav): apply multi-class item classes, style the label as a nav link (#309) - fix(sidebar-nav-helper): `isActive()` handles array urls (#296) - fix(sidebar-nav-icon.pipe): handle a missing item (#296) - fix(table): keep one responsive wrapper and remove it on destroy (#305) - fix(tabs): Home/End, one key manager, navigate and select by key (#306) - fix: ignore key events without a key (#302) - refactor(tab-pane): `OnPush`, signal state, host metadata (#294) - refactor: drop `ngAcceptInputType_` from signal inputs (#293) - test: run specs zoneless, drop `zone.js` (#295) - test: use `TestBed.createDirective()` in directive specs (#292) - test: cover untested paths across components and services (#300, #301, #308) - ci: bump `actions/setup-node` (#297) - chore(dependencies): update to Angular 22.2.3 (#310) Verified: `npm ci`, lint, tests 30 + 1035 + 60, 3 prod builds.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Keyboard and selection fixes in c-tabs-list, cTab and c-tab-panel.
Home and End now move focus to and select the first and last enabled tab; onKeyDown passed only the arrows to the key manager. The list keeps one FocusKeyManager on the tabs signal and destroys it with the list. Direction is read at keydown.
Keys start from the tab that holds the event target, so the arrows no longer drift after a click or an external activeItemKey, and keys from anything else inside the list are left alone.
A tab is selected when activeItemKey === itemKey, whatever its disabled state, as in vanilla, React and Vue: a disabled selected tab stays active and aria-selected and its panel stays shown. Before, the panel could hide every panel after a click and a tab list change moved the key to the first enabled tab. Without a key the list still selects the first enabled tab, or the first tab when all are disabled.