fix(filter-bar): restore focus after closing (#DS-4187)

Author: lskramarov

packages/components/filter-bar/filter-bar-button.ts

@@ -3,14 +3,21 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { KbqButton, KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
 import { KbqFilterBar } from './filter-bar';
+import { KbqFilters } from './filters';
 
 @Directive({
-    selector: '[kbqFilterBarButton]'
+    selector: '[kbqFilterBarButton]',
+    host: {
+        '(click)': 'saveFocusedElement()',
+        '(keydown)': 'saveFocusedElement()'
+    }
 })
 export class KbqFilterBarButton {
     private readonly button = inject(KbqButton);
     /** KbqFilterBar instance */
     private readonly filterBar = inject(KbqFilterBar);
+    /** KbqFilters instance */
+    protected readonly filters = inject(KbqFilters);
 
     constructor() {
         this.filterBar.changes.pipe(takeUntilDestroyed()).subscribe(() => {
@@ -23,4 +30,9 @@ export class KbqFilterBarButton {
             }
         });
     }
+
+    /** @docs-private */
+    saveFocusedElement() {
+        this.filters.saveFocusedElement(this.button);
+    }
 }

packages/components/filter-bar/filters.html

@@ -1,4 +1,5 @@
 <button
+    #mainButton
     kbq-button
     kbq-title
     kbqFilterBarButton
@@ -13,8 +14,8 @@
     [kbqPopoverPlacementPriority]="[placements.BottomLeft, placements.TopLeft]"
     [kbqPopoverSize]="popoverSize"
     [kbqTrigger]="'manual'"
-    [class.kbq-active]="opened"
     [disabled]="isSaving"
+    [class.kbq-active]="focusedElementBeforeIs(mainButton) && opened"
     (dropdownClosed)="searchControl.setValue('')"
     (dropdownOpened)="onDropdownOpen()"
 >
@@ -32,10 +33,12 @@
 
 @if (filterBar.isChanged && !filterBar.isSaved) {
     <button
+        #saveNewFilterButton
         kbqTooltip="{{ localeData.saveNewFilterTooltip }}"
         kbq-button
         kbqFilterBarButton
         class="kbq-button_action"
+        [class.kbq-active]="focusedElementBeforeIs(saveNewFilterButton) && opened"
         [color]="colors.Empty"
         [disabled]="isSaving"
         (click)="openSaveAsNewFilterPopover()"
@@ -46,12 +49,14 @@
 
 @if (filterBar.isSaved) {
     <button
+        #filterActionsButton
         kbq-button
         kbqFilterBarButton
         class="kbq-button_action"
         [color]="colors.Empty"
         [kbqDropdownTriggerFor]="filterActions"
         [disabled]="isSaving"
+        [class.kbq-active]="focusedElementBeforeIs(filterActionsButton) && filterActionsOpened"
         [ngClass]="{ 'kbq-button_changed-saved-filter': filterBar.isSavedAndChanged }"
     >
         <i kbq-icon="kbq-ellipsis-vertical_16"></i>
@@ -142,7 +147,7 @@
         </button>
     }
     @if (!filterBar.isReadOnly) {
-        <button kbq-dropdown-item (click)="this.onRemoveFilter.next(this.filter!)">
+        <button kbq-dropdown-item (click)="removeFilter()">
             <i kbq-icon="kbq-trash_16"></i>
             {{ localeData.remove }}
         </button>
@@ -191,7 +196,7 @@
     >
         {{ localeData.saveButton }}
     </button>
-    <button kbq-button [color]="'contrast-fade'" [kbqStyle]="'filled'" [disabled]="isSaving" (click)="closePopover()">
+    <button kbq-button [color]="'contrast-fade'" [kbqStyle]="'filled'" [disabled]="isSaving" (click)="popover.hide()">
         {{ localeData.cancelButton }}
     </button>
 </ng-template>

packages/components/filter-bar/filters.ts

@@ -1,8 +1,10 @@
+import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { AsyncPipe, NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    DestroyRef,
     ElementRef,
     EventEmitter,
     inject,
@@ -12,6 +14,7 @@ import {
     ViewChild,
     ViewEncapsulation
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, FormsModule, ReactiveFormsModule, UntypedFormControl, Validators } from '@angular/forms';
 import { KbqAlertModule } from '@koobiq/components/alert';
 import { KbqButton, KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
@@ -60,6 +63,12 @@ import { KbqFilter, KbqSaveFilterError, KbqSaveFilterEvent, KbqSaveFilterStatuse
     }
 })
 export class KbqFilters implements OnInit {
+    /** @docs-private */
+    protected readonly elementRef = inject(ElementRef);
+    /** @docs-private */
+    protected readonly destroyRef = inject(DestroyRef);
+    /** @docs-private */
+    protected readonly focusMonitor = inject(FocusMonitor);
     /** @docs-private */
     protected readonly placements = PopUpPlacements;
     /** @docs-private */
@@ -73,9 +82,20 @@ export class KbqFilters implements OnInit {
     /** @docs-private */
     private readonly changeDetectorRef = inject(ChangeDetectorRef);
 
-    @ViewChild(KbqButton) private button: KbqButton;
-    @ViewChild(KbqPopoverTrigger) private popover: KbqPopoverTrigger;
-    @ViewChild(KbqDropdownTrigger) private dropdown: KbqDropdownTrigger;
+    /** @docs-private */
+    @ViewChild('mainButton') protected mainButton: KbqButton;
+    /** @docs-private */
+    @ViewChild('saveNewFilterButton') protected saveNewFilterButton: KbqButton;
+    /** @docs-private */
+    @ViewChild('filterActionsButton') protected filterActionsButton: KbqButton;
+
+    /** @docs-private */
+    @ViewChild(KbqPopoverTrigger) protected popover: KbqPopoverTrigger;
+    /** @docs-private */
+    @ViewChild(KbqDropdownTrigger) protected dropdown: KbqDropdownTrigger;
+    /** @docs-private */
+    @ViewChild('filterActionsButton') protected filterActionsDropdown: KbqDropdownTrigger;
+
     @ViewChild('search') private search: ElementRef;
     @ViewChild('newFilterName') private newFilterName: ElementRef;
     @ViewChild('saveFilterButton') private saveFilterButton: KbqButton;
@@ -125,6 +145,11 @@ export class KbqFilters implements OnInit {
         return this.popover?.isOpen || this.dropdown?.opened;
     }
 
+    /** Component state. true if opened dropdown or popup of filterActions */
+    get filterActionsOpened(): boolean {
+        return this.popover?.isOpen || this.filterActionsDropdown?.opened;
+    }
+
     /** Selected filter */
     get filter(): KbqFilter | null {
         return this.filterBar.filter;
@@ -141,6 +166,16 @@ export class KbqFilters implements OnInit {
         return this.filterBar.configuration.filters;
     }
 
+    /** Current focus origin state.
+     * @docs-private */
+    get focusOrigin(): FocusOrigin {
+        return this._focusOrigin;
+    }
+
+    private _focusOrigin: FocusOrigin = null;
+
+    private focusedElementBeforeOpen: KbqButton | null;
+
     constructor() {
         this.filterBar.changes.subscribe(() => this.changeDetectorRef.markForCheck());
     }
@@ -150,6 +185,19 @@ export class KbqFilters implements OnInit {
             of(this.filters),
             this.searchControl.valueChanges.pipe(map((value) => this.getFilteredOptions(value)))
         );
+
+        this.focusMonitor
+            .monitor(this.elementRef, true)
+            .pipe(
+                filter((origin) => !!origin),
+                takeUntilDestroyed(this.destroyRef)
+            )
+            .subscribe((origin) => (this._focusOrigin = origin));
+    }
+
+    /** @docs-private */
+    focusedElementBeforeIs(button: KbqButton): boolean {
+        return this.focusedElementBeforeOpen === button;
     }
 
     selectFilter(filter: KbqFilter) {
@@ -210,7 +258,10 @@ export class KbqFilters implements OnInit {
     }
 
     restoreFocus() {
-        this.button.focus();
+        if (this.focusedElementBeforeOpen && !this.focusedElementBeforeOpen.disabled) {
+            this.focusMonitor.focusVia(this.focusedElementBeforeOpen.elementRef, this.focusOrigin);
+            this.focusedElementBeforeOpen = null;
+        }
     }
 
     preparePopover() {
@@ -221,11 +272,19 @@ export class KbqFilters implements OnInit {
         this.popover.show();
 
         merge(...this.popover.defaultClosingActions())
-            .pipe(filter(() => !this.isSaving))
+            .pipe(
+                filter(() => !this.isSaving),
+                takeUntilDestroyed(this.popover.instanceDestroyRef)
+            )
+            .subscribe(() => this.closePopover(false));
+
+        this.popover.visibleChange
+            .pipe(
+                filter((state) => !state),
+                takeUntilDestroyed(this.popover.instanceDestroyRef)
+            )
             .subscribe(this.closePopover);
 
-        this.popover.visibleChange.pipe(filter((state) => !state)).subscribe(this.closePopover);
-
         setTimeout(() => {
             this.newFilterName.nativeElement.focus();
             this.filterName.setErrors(null);
@@ -244,10 +303,15 @@ export class KbqFilters implements OnInit {
         this.preparePopover();
     }
 
-    closePopover = () => {
+    /** @docs-private */
+    saveFocusedElement(button?: KbqButton) {
+        this.focusedElementBeforeOpen = button || null;
+    }
+
+    closePopover = (restoreFocus: boolean = true) => {
         this.popover.hide();
 
-        this.restoreFocus();
+        if (restoreFocus) this.restoreFocus();
 
         setTimeout(() => this.changeDetectorRef.detectChanges());
 
@@ -280,6 +344,12 @@ export class KbqFilters implements OnInit {
         this.onResetFilterChanges.emit(this.filter!);
     }
 
+    removeFilter() {
+        this.onRemoveFilter.next(this.filter!);
+
+        setTimeout(() => this.focusMonitor.focusVia(this.mainButton.elementRef, this.focusOrigin), 0);
+    }
+
     /** Hide the popup and restore focus.
      * Use this method in the onSave, onSaveAsNew, or onChangeFilter events after the data has been successfully saved. */
     filterSavedSuccessfully() {

packages/components/popover/popover.component.ts

@@ -14,6 +14,7 @@ import {
     AfterViewInit,
     ChangeDetectionStrategy,
     Component,
+    DestroyRef,
     Directive,
     ElementRef,
     EventEmitter,
@@ -374,6 +375,11 @@ export class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> impl
         return this.trigger.includes(PopUpTriggers.Click);
     }
 
+    /** @docs-private */
+    get instanceDestroyRef(): DestroyRef {
+        return this.instance.destroyRef;
+    }
+
     @Input() backdropClass: string = 'cdk-overlay-transparent-backdrop';
 
     // @TODO add realization for arrow (#DS-2514)

packages/components/title/title.directive.ts

@@ -44,7 +44,7 @@ export class KbqTitleDirective extends KbqTooltipTrigger implements AfterViewIni
         /** For special cases where the difference is a fraction of a pixel */
         if (
             !this.isVerticalOverflown &&
-            (this.child.scrollWidth === 0 || this.parent.offsetWidth === this.child.scrollWidth)
+            (this.child.scrollWidth === 0 || this.parent?.offsetWidth === this.child.scrollWidth)
         ) {
             if (this.hasOnlyText) {
                 const wrapper = this.renderer.createElement('span');
@@ -66,7 +66,7 @@ export class KbqTitleDirective extends KbqTooltipTrigger implements AfterViewIni
     }
 
     get isHorizontalOverflown(): boolean {
-        return this.parent.offsetWidth < this.child.scrollWidth;
+        return this.parent?.offsetWidth < this.child.scrollWidth;
     }
 
     get isVerticalOverflown(): boolean {

tools/public_api_guard/components/filter-bar.api.md

@@ -12,6 +12,8 @@ import { DestroyRef } from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import { FlatTreeControl } from '@koobiq/components/tree';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { FocusOrigin } from '@angular/cdk/a11y';
 import { FormControl } from '@angular/forms';
 import { FormGroup } from '@angular/forms';
 import * as i0 from '@angular/core';
@@ -21,6 +23,7 @@ import { InputSignalWithTransform } from '@angular/core';
 import { KbqButton } from '@koobiq/components/button';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqListSelection } from '@koobiq/components/list';
 import { KbqLocaleService } from '@koobiq/components/core';
 import { KbqOption } from '@koobiq/components/core';
@@ -210,6 +213,8 @@ export class KbqFilterBar {
 // @public (undocumented)
 export class KbqFilterBarButton {
     constructor();
+    protected readonly filters: KbqFilters;
+    saveFocusedElement(): void;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFilterBarButton, "[kbqFilterBarButton]", never, {}, {}, never, never, true, never>;
     // (undocumented)
@@ -289,9 +294,15 @@ export class KbqFilterReset {
 export class KbqFilters implements OnInit {
     constructor();
     // (undocumented)
-    closePopover: () => void;
+    closePopover: (restoreFocus?: boolean) => void;
     protected readonly colors: typeof KbqComponentColors;
+    protected readonly destroyRef: DestroyRef;
+    protected dropdown: KbqDropdownTrigger;
+    protected readonly elementRef: ElementRef<any>;
     get filter(): KbqFilter | null;
+    protected filterActionsButton: KbqButton;
+    protected filterActionsDropdown: KbqDropdownTrigger;
+    get filterActionsOpened(): boolean;
     protected readonly filterBar: KbqFilterBar;
     filteredOptions: Observable<KbqFilter[]>;
     filterName: FormControl<string | null>;
@@ -301,10 +312,14 @@ export class KbqFilters implements OnInit {
     filterSavedUnsuccessfully(error?: KbqSaveFilterError): void;
     // (undocumented)
     filterSavingErrorText: string;
+    focusedElementBeforeIs(button: KbqButton): boolean;
+    protected readonly focusMonitor: FocusMonitor;
+    get focusOrigin(): FocusOrigin;
     get isEmpty(): boolean;
     // (undocumented)
     isSaving: boolean;
     get localeData(): any;
+    protected mainButton: KbqButton;
     // (undocumented)
     ngOnInit(): void;
     readonly onChangeFilter: EventEmitter<KbqSaveFilterEvent>;
@@ -321,19 +336,24 @@ export class KbqFilters implements OnInit {
     // (undocumented)
     openSaveAsNewFilterPopover(): void;
     protected readonly placements: typeof PopUpPlacements;
+    protected popover: KbqPopoverTrigger;
     get popoverHeader(): string;
     popoverSize: PopUpSizes;
     // (undocumented)
     preparePopover(): void;
     // (undocumented)
+    removeFilter(): void;
+    // (undocumented)
     resetFilterChanges(): void;
     // (undocumented)
     restoreFocus(): void;
     // (undocumented)
     saveAsNew(event?: Event): void;
     // (undocumented)
     saveChanges(): void;
+    saveFocusedElement(button?: KbqButton): void;
     saveNewFilter: boolean;
+    protected saveNewFilterButton: KbqButton;
     searchControl: UntypedFormControl;
     searchKeydownHandler(event: KeyboardEvent): void;
     // (undocumented)