From d6e36e1bf5016f596ce04e44f7405a3fe85a5796 Mon Sep 17 00:00:00 2001
From: Steve Golton <stevegolton@google.com>
Date: Tue, 22 Aug 2023 17:20:59 +0100
Subject: [PATCH] Focus track name automatically in "add debug track" menu.

Change-Id: Ia987e1e01159fea5a774088c501bde806f5c0e54
---
 ui/src/tracks/debug/add_debug_track_menu.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/ui/src/tracks/debug/add_debug_track_menu.ts b/ui/src/tracks/debug/add_debug_track_menu.ts
index 41388fd3a8..b7355c1dcc 100644
--- a/ui/src/tracks/debug/add_debug_track_menu.ts
+++ b/ui/src/tracks/debug/add_debug_track_menu.ts
@@ -14,6 +14,7 @@
 
 import m from 'mithril';
 
+import {findRef} from '../../base/dom_utils';
 import {EngineProxy} from '../../common/engine';
 import {Form, FormLabel} from '../../frontend/widgets/form';
 import {Select} from '../../frontend/widgets/select';
@@ -32,6 +33,8 @@ interface AddDebugTrackMenuAttrs {
   engine: EngineProxy;
 }
 
+const TRACK_NAME_FIELD_REF = 'TRACK_NAME_FIELD';
+
 export class AddDebugTrackMenu implements
     m.ClassComponent<AddDebugTrackMenuAttrs> {
   readonly columns: string[];
@@ -68,6 +71,19 @@ export class AddDebugTrackMenu implements
     };
   }
 
+  oncreate({dom}: m.VnodeDOM<AddDebugTrackMenuAttrs>) {
+    this.focusTrackNameField(dom);
+  }
+
+  private focusTrackNameField(dom: Element) {
+    const element = findRef(dom, TRACK_NAME_FIELD_REF);
+    if (element) {
+      if (element instanceof HTMLInputElement) {
+        element.focus();
+      }
+    }
+  }
+
   view(vnode: m.Vnode<AddDebugTrackMenuAttrs>) {
     const renderSelect = (name: 'ts'|'dur'|'name') => {
       const options = [];
@@ -120,6 +136,7 @@ export class AddDebugTrackMenu implements
           'Track name'),
         m(TextInput, {
           id: 'track_name',
+          ref: TRACK_NAME_FIELD_REF,
           onkeydown: (e: KeyboardEvent) => {
             // Allow Esc to close popup.
             if (e.key === 'Escape') return;