Merge "Focus track name automatically in "add debug track" menu." int…

…o main
google · Aug 25, 2023 · 99f233f · 99f233f
2 parents 3ef9d13 + d6e36e1
commit 99f233f
Showing 1 changed file with 17 additions and 0 deletions.
diff --git 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;