fix(tags): prevent focus-back loop in eventCoalescing mode (#DS-5236)#1687
fix(tags): prevent focus-back loop in eventCoalescing mode (#DS-5236)#1687NikGurev wants to merge 2 commits into
Conversation
|
Visit the preview URL for this PR (updated for commit 2a640f4): https://koobiq-next--prs-1687-64hoeuk0.web.app (expires Tue, 07 Jul 2026 14:57:42 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
| // it back to the first tag when the user tabs out. | ||
| this.keyManager.tabOut.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => { | ||
| this._tabIndex = -1; | ||
| this.elementRef.nativeElement.tabIndex = -1; |
There was a problem hiding this comment.
'[attr.tabindex]': 'tabIndex',
tabIndex - же применяется к хосту, зачем перезаписывать это значение? возможно дело в cdr? миграция на сигнал не решит проблему?
There was a problem hiding this comment.
не решит,в режиме eventCoalescing keydown событие и focus tag-list будут объединены в группу, а CD произойдет после. Так же и при использовании сигнала
можно решить, добавив changeDetectorRef.detectChanges(), но избыточно если eventCoalescing: false. Поэтому установка tabIndex -1 - самый простой и рабочий способ
There was a problem hiding this comment.
Pull request overview
This PR fixes a focus-back loop in KbqTagList when users tab out of the list (notably reproducible with provideZoneChangeDetection({ eventCoalescing: true })) by synchronously updating the host element’s native tabIndex so the browser won’t treat the list host as a tab stop during Tab key processing.
Changes:
- Synchronously sets the host element’s native
tabIndex = -1onFocusKeyManager.tabOutto prevent the browser from re-focusing the tag-list host. - Adds a unit test asserting the native DOM
tabIndexis updated immediately ontabOut. - Adds a unit test asserting
tabIndexis restored to a user-provided value aftertabOut.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/components/tags/tag-list.component.ts | Writes nativeElement.tabIndex = -1 synchronously on tabOut to avoid focus re-capture under event coalescing. |
| packages/components/tags/tag-list.component.spec.ts | Adds coverage for immediate native tabIndex update and restoring user tabIndex after tab-out. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary
Applied fix to prevent tag list for capturing focus. Works regardless of mode.
Initially, bug was reproduced only with
provideZoneChangeDetection({ eventCoalescing: true })since batch processing of events.