feat(admin-ui): Auto-focus name input when creating new product option

packages/admin-ui/src/lib/catalog/src/components/generate-product-variants/generate-product-variants.component.html

@@ -2,6 +2,7 @@
     <div class="name">
         <label>{{ 'catalog.option' | translate }}</label>
         <input
+            #optionGroupName
             placeholder="e.g. Size"
             clrInput
             [(ngModel)]="group.name"

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, OnInit, Output, QueryList, ViewChildren } from '@angular/core';
 import { CurrencyCode, DataService } from '@vendure/admin-ui/core';
 import { generateAllCombinations } from '@vendure/common/lib/shared-utils';
 
@@ -24,6 +24,7 @@ export type CreateProductVariantsConfig = {
 })
 export class GenerateProductVariantsComponent implements OnInit {
     @Output() variantsChange = new EventEmitter<CreateProductVariantsConfig>();
+    @ViewChildren('optionGroupName', { read: ElementRef }) groupNameInputs: QueryList<ElementRef>;
     optionGroups: Array<{ name: string; values: Array<{ name: string; locked: boolean }> }> = [];
     currencyCode: CurrencyCode;
     variants: Array<{ id: string; values: string[] }>;
@@ -40,6 +41,11 @@ export class GenerateProductVariantsComponent implements OnInit {
 
     addOption() {
         this.optionGroups.push({ name: '', values: [] });
+        const index = this.optionGroups.length - 1;
+        setTimeout(() => {
+            const input = this.groupNameInputs.get(index)?.nativeElement;
+            input?.focus();
+        });
     }
 
     removeOption(name: string) {