feat(admin-ui): Focus facet selector when opening "add facets" dialog

packages/admin-ui/src/lib/catalog/src/components/apply-facet-dialog/apply-facet-dialog.component.ts

@@ -1,7 +1,11 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-import { FacetValue, FacetWithValues } from '@vendure/admin-ui/core';
-import { Dialog } from '@vendure/admin-ui/core';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ViewChild,
+} from '@angular/core';
+import { Dialog, FacetValue, FacetValueSelectorComponent, FacetWithValues } from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-apply-facet-dialog',
@@ -9,12 +13,19 @@ import { Dialog } from '@vendure/admin-ui/core';
     styleUrls: ['./apply-facet-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ApplyFacetDialogComponent implements Dialog<FacetValue[]> {
+export class ApplyFacetDialogComponent implements Dialog<FacetValue[]>, AfterViewInit {
+    @ViewChild(FacetValueSelectorComponent) private selector: FacetValueSelectorComponent;
     resolveWith: (result?: FacetValue[]) => void;
     selectedValues: FacetValue[] = [];
     // Provided by caller
     facets: FacetWithValues.Fragment[];
 
+    constructor(private changeDetector: ChangeDetectorRef) {}
+
+    ngAfterViewInit() {
+        setTimeout(() => this.selector.focus(), 0);
+    }
+
     selectValues() {
         this.resolveWith(this.selectedValues);
     }

packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts

@@ -314,6 +314,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
             mergeMap((facets) =>
                 this.modalService.fromComponent(ApplyFacetDialogComponent, {
                     size: 'md',
+                    closable: true,
                     locals: { facets },
                 }),
             ),

packages/admin-ui/src/lib/core/src/shared/components/facet-value-selector/facet-value-selector.component.ts

@@ -1,9 +1,18 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    ViewChild,
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DataService } from '../../../data/providers/data.service';
+import { NgSelectComponent } from '@ng-select/ng-select';
 
 import { FacetValue, FacetWithValues } from '../../../common/generated-types';
 import { flattenFacetValues } from '../../../common/utilities/flatten-facet-values';
+import { DataService } from '../../../data/providers/data.service';
 
 export type FacetValueSeletorItem = {
     name: string;
@@ -30,6 +39,8 @@ export class FacetValueSelectorComponent implements OnInit, ControlValueAccessor
     @Input() facets: FacetWithValues.Fragment[];
     @Input() readonly = false;
 
+    @ViewChild(NgSelectComponent) private ngSelect: NgSelectComponent;
+
     facetValues: FacetValueSeletorItem[] = [];
     onChangeFn: (val: any) => void;
     onTouchFn: () => void;
@@ -45,9 +56,9 @@ export class FacetValueSelectorComponent implements OnInit, ControlValueAccessor
         if (this.readonly) {
             return;
         }
-        this.selectedValuesChange.emit(selected.map(s => s.value));
+        this.selectedValuesChange.emit(selected.map((s) => s.value));
         if (this.onChangeFn) {
-            this.onChangeFn(JSON.stringify(selected.map(s => s.id)));
+            this.onChangeFn(JSON.stringify(selected.map((s) => s.id)));
         }
     }
 
@@ -63,6 +74,10 @@ export class FacetValueSelectorComponent implements OnInit, ControlValueAccessor
         this.disabled = isDisabled;
     }
 
+    focus() {
+        this.ngSelect.focus();
+    }
+
     writeValue(obj: string | FacetValue.Fragment[] | null): void {
         if (typeof obj === 'string') {
             try {
@@ -73,7 +88,7 @@ export class FacetValueSelectorComponent implements OnInit, ControlValueAccessor
                 throw err;
             }
         } else if (obj) {
-            this.value = obj.map(fv => fv.id);
+            this.value = obj.map((fv) => fv.id);
         }
     }
 
@@ -84,5 +99,5 @@ export class FacetValueSelectorComponent implements OnInit, ControlValueAccessor
             id: facetValue.id,
             value: facetValue,
         };
-    }
+    };
 }