From fe0aa6941fa216aec74b6a857a66878735a5f5c6 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 3 Mar 2023 13:50:39 +0100 Subject: [PATCH] fix(material/chips): unable to shift + tab out of a chip set Fixes that it wasn't possible for the user to use shift + tab to move out of a chip set. We had some logic to handle it already, but it was resetting the tabindex before focus has a chance to escape. Fixes #26698. --- src/material/chips/chip-set.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/material/chips/chip-set.ts b/src/material/chips/chip-set.ts index 2ed3493b42b5..484957676dc3 100644 --- a/src/material/chips/chip-set.ts +++ b/src/material/chips/chip-set.ts @@ -189,20 +189,18 @@ export class MatChipSet } /** - * Removes the `tabindex` from the chip grid and resets it back afterwards, allowing the - * user to tab out of it. This prevents the grid from capturing focus and redirecting + * Removes the `tabindex` from the chip set and resets it back afterwards, allowing the + * user to tab out of it. This prevents the set from capturing focus and redirecting * it back to the first chip, creating a focus trap, if it user tries to tab away. */ protected _allowFocusEscape() { - const previousTabIndex = this.tabIndex; - if (this.tabIndex !== -1) { + const previousTabIndex = this.tabIndex; this.tabIndex = -1; - Promise.resolve().then(() => { - this.tabIndex = previousTabIndex; - this._changeDetectorRef.markForCheck(); - }); + // Note that this needs to be a `setTimeout`, because a `Promise.resolve` + // doesn't allow enough time for the focus to escape. + setTimeout(() => (this.tabIndex = previousTabIndex)); } }