Frontend archived item edit dialog focus

frontend/src/features/archived-items/item-metadata-editor.ts

@@ -1,16 +1,20 @@
 import { localized, msg } from "@lit/localize";
+import type { SlTextarea } from "@shoelace-style/shoelace";
 import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js";
 import Fuse from "fuse.js";
 import { html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import type {
   TagInputEvent,
   Tags,
   TagsChangeEvent,
 } from "@/components/ui/tag-input";
-import { type CollectionsChangeEvent } from "@/features/collections/collections-add";
+import type {
+  CollectionsAdd,
+  CollectionsChangeEvent,
+} from "@/features/collections/collections-add";
 import type { ArchivedItem } from "@/types/crawler";
 import { type WorkflowTag, type WorkflowTags } from "@/types/workflow";
 import { maxLengthValidator } from "@/utils/form";
@@ -56,6 +60,12 @@ export class CrawlMetadataEditor extends BtrixElement {
   @state()
   private collectionsToSave: string[] = [];
 
+  @query("#description-input")
+  public readonly descriptionInput?: SlTextarea | null;
+
+  @query("#collection-input")
+  public readonly collectionInput?: CollectionsAdd | null;
+
   // For fuzzy search:
   private readonly fuse = new Fuse<WorkflowTag>([], {
     keys: ["tag"],
@@ -109,6 +119,7 @@ export class CrawlMetadataEditor extends BtrixElement {
             `
           : ``}
         <sl-textarea
+          id="description-input"
           class="with-max-help-text mb-3"
           name="crawlDescription"
           label=${msg("Description")}
@@ -128,6 +139,7 @@ export class CrawlMetadataEditor extends BtrixElement {
         ></btrix-tag-input>
         <div class="mt-7">
           <btrix-collections-add
+            id="collection-input"
             .initialCollections=${this.crawl.collectionIds}
             .configId=${"temp"}
             label=${msg("Include in Collection")}

frontend/src/features/collections/collections-add.ts

@@ -55,7 +55,7 @@ export class CollectionsAdd extends BtrixElement {
   @state()
   private collectionIds: string[] = [];
 
-  @query("sl-input")
+  @query("#search-input")
   private readonly input?: SlInput | null;
 
   @query("btrix-combobox")
@@ -82,6 +82,11 @@ export class CollectionsAdd extends BtrixElement {
     args: () => [this.searchByValue, this.hasSearchStr] as const,
   });
 
+  public focus() {
+    // Move focus to search input
+    this.input?.focus();
+  }
+
   connectedCallback() {
     if (this.initialCollections) {
       this.collectionIds = this.initialCollections;
@@ -152,6 +157,7 @@ export class CollectionsAdd extends BtrixElement {
         }}
       >
         <sl-input
+          id="search-input"
           size="small"
           placeholder=${msg("Search by Collection name")}
           clearable

frontend/src/pages/org/archived-item-detail/archived-item-detail.ts

@@ -10,6 +10,7 @@ import capitalize from "lodash/fp/capitalize";
 import { BtrixElement } from "@/classes/BtrixElement";
 import { type Dialog } from "@/components/ui/dialog";
 import { ClipboardController } from "@/controllers/clipboard";
+import type { CrawlMetadataEditor } from "@/features/archived-items/item-metadata-editor";
 import { pageBack, pageNav, type Breadcrumb } from "@/layouts/pageHeader";
 import { WorkflowTab } from "@/routes";
 import type { APIPaginatedList } from "@/types/api";
@@ -116,6 +117,9 @@ export class ArchivedItemDetail extends BtrixElement {
   @query("#cancelQARunDialog")
   private readonly cancelQARunDialog?: Dialog | null;
 
+  @query("btrix-item-metadata-editor")
+  private readonly editDialog?: CrawlMetadataEditor | null;
+
   private readonly tabLabels: Omit<
     Record<SectionName, string>,
     "watch" | "exclusions"
@@ -421,7 +425,7 @@ export class ArchivedItemDetail extends BtrixElement {
                       <sl-icon-button
                         class="text-base"
                         name="pencil"
-                        @click=${this.openMetadataEditor}
+                        @click=${() => this.openMetadataEditor("metadata")}
                         label=${msg("Edit Archived Item")}
                       ></sl-icon-button>
                     `,
@@ -441,7 +445,7 @@ export class ArchivedItemDetail extends BtrixElement {
                       <sl-icon-button
                         class="text-base"
                         name="pencil"
-                        @click=${this.openMetadataEditor}
+                        @click=${() => this.openMetadataEditor("collections")}
                         label=${msg("Edit Archived Item")}
                       ></sl-icon-button>
                     `,
@@ -669,11 +673,7 @@ export class ArchivedItemDetail extends BtrixElement {
           ${when(
             this.isCrawler,
             () => html`
-              <sl-menu-item
-                @click=${() => {
-                  this.openMetadataEditor();
-                }}
-              >
+              <sl-menu-item @click=${this.openMetadataEditor}>
                 <sl-icon name="pencil" slot="prefix"></sl-icon>
                 ${msg("Edit Archived Item")}
               </sl-menu-item>
@@ -1319,7 +1319,26 @@ export class ArchivedItemDetail extends BtrixElement {
     }
   }
 
-  private openMetadataEditor() {
+  private openMetadataEditor(section?: "metadata" | "collections") {
+    if (section) {
+      this.editDialog?.addEventListener(
+        "sl-after-show",
+        () => {
+          switch (section) {
+            case "metadata":
+              this.editDialog?.descriptionInput?.focus();
+              break;
+            case "collections":
+              this.editDialog?.collectionInput?.focus();
+              break;
+            default:
+              break;
+          }
+        },
+        { once: true },
+      );
+    }
+
     this.openDialogName = "metadata";
   }