[PM-9673] Autofocus newly added input in the excluded domains view (#10641)

* autofocus newly added input in the excluded domains view

* update subscription

apps/browser/src/autofill/popup/settings/autofill.component.ts

@@ -78,8 +78,8 @@ export class AutofillComponent implements OnInit {
    * Default values set here are used in component state operations
    * until corresponding stored settings have loaded on init.
    */
-  protected canOverrideBrowserAutofillSetting = false;
-  protected defaultBrowserAutofillDisabled = false;
+  protected canOverrideBrowserAutofillSetting: boolean = false;
+  protected defaultBrowserAutofillDisabled: boolean = false;
   protected inlineMenuVisibility: InlineMenuVisibilitySetting =
     AutofillOverlayVisibility.OnFieldFocus;
   protected browserClientVendor: BrowserClientVendor = BrowserClientVendors.Unknown;
@@ -90,21 +90,21 @@ export class AutofillComponent implements OnInit {
   protected autofillOnPageLoadFromPolicy$ =
     this.autofillSettingsService.activateAutofillOnPageLoadFromPolicy$;
 
-  enableAutofillOnPageLoad = false;
-  enableInlineMenu = false;
-  enableInlineMenuOnIconSelect = false;
-  autofillOnPageLoadDefault = false;
+  enableAutofillOnPageLoad: boolean = false;
+  enableInlineMenu: boolean = false;
+  enableInlineMenuOnIconSelect: boolean = false;
+  autofillOnPageLoadDefault: boolean = false;
   autofillOnPageLoadOptions: { name: string; value: boolean }[];
-  enableContextMenuItem = false;
-  enableAutoTotpCopy = false;
+  enableContextMenuItem: boolean = false;
+  enableAutoTotpCopy: boolean = false;
   clearClipboard: ClearClipboardDelaySetting;
   clearClipboardOptions: { name: string; value: ClearClipboardDelaySetting }[];
   defaultUriMatch: UriMatchStrategySetting = UriMatchStrategy.Domain;
   uriMatchOptions: { name: string; value: UriMatchStrategySetting }[];
-  showCardsCurrentTab = true;
-  showIdentitiesCurrentTab = true;
+  showCardsCurrentTab: boolean = true;
+  showIdentitiesCurrentTab: boolean = true;
   autofillKeyboardHelperText: string;
-  accountSwitcherEnabled = false;
+  accountSwitcherEnabled: boolean = false;
 
   constructor(
     private i18nService: I18nService,

apps/browser/src/autofill/popup/settings/excluded-domains.component.html

@@ -27,6 +27,7 @@
             }}</bit-label>
             <input
               *ngIf="i >= fieldsEditThreshold"
+              #uriInput
               appInputVerbatim
               bitInput
               id="excludedDomain{{ i }}"

apps/browser/src/autofill/popup/settings/excluded-domains.component.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from "@angular/common";
-import { Component, OnDestroy, OnInit } from "@angular/core";
+import { QueryList, Component, ElementRef, OnDestroy, OnInit, ViewChildren } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { Router, RouterModule } from "@angular/router";
-import { firstValueFrom } from "rxjs";
+import { firstValueFrom, Subject, takeUntil } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
@@ -56,6 +56,8 @@ const BroadcasterSubscriptionId = "excludedDomainsState";
   ],
 })
 export class ExcludedDomainsComponent implements OnInit, OnDestroy {
+  @ViewChildren("uriInput") uriInputElements: QueryList<ElementRef<HTMLInputElement>>;
+
   accountSwitcherEnabled = false;
   dataIsPristine = true;
   excludedDomainsState: string[] = [];
@@ -63,6 +65,8 @@ export class ExcludedDomainsComponent implements OnInit, OnDestroy {
   // How many fields should be non-editable before editable fields
   fieldsEditThreshold: number = 0;
 
+  private destroy$ = new Subject<void>();
+
   constructor(
     private domainSettingsService: DomainSettingsService,
     private i18nService: I18nService,
@@ -84,10 +88,22 @@ export class ExcludedDomainsComponent implements OnInit, OnDestroy {
 
     // Do not allow the first x (pre-existing) fields to be edited
     this.fieldsEditThreshold = this.storedExcludedDomains.length;
+
+    this.uriInputElements.changes.pipe(takeUntil(this.destroy$)).subscribe(({ last }) => {
+      this.focusNewUriInput(last);
+    });
   }
 
   ngOnDestroy() {
     this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  focusNewUriInput(elementRef: ElementRef) {
+    if (elementRef?.nativeElement) {
+      elementRef.nativeElement.focus();
+    }
   }
 
   async addNewDomain() {