document name input focus

src/devtools/tests.ts

@@ -6074,6 +6074,39 @@ export function registerAllTests(): void {
       handle.unmount()
     })
 
+    test('opening the drawer moves focus into the project-name input', async () => {
+      // Renaming is the main reason to open this drawer — cursor
+      // should land on the name field so the user can just start
+      // typing. Focus is scheduled for the next tick so Vue has
+      // committed the open class + the input is laid out.
+      makeFreshStore()
+      const { useProjectName } = await import('@/composables/useProjectName')
+      useProjectName().projectName.value = 'Hero'
+      const handle = mountComponent(DocumentDrawer, {})
+      try {
+        await nextTick()
+        const { useDocumentDrawer } = await import(
+          '@/composables/useDocumentDrawer'
+        )
+        useDocumentDrawer().openDrawer()
+        // Wait two ticks: one for `open` to flush, one for the
+        // scheduled focus in nextTick inside the watch.
+        await nextTick()
+        await nextTick()
+        const input = handle.host.querySelector(
+          '.document-drawer .name-input',
+        ) as HTMLInputElement
+        expect(input).toBeTruthy()
+        expect(document.activeElement).toBe(input)
+        // Contents pre-selected so the user can overwrite in one
+        // go (selectionStart/End span the full value).
+        expect(input.selectionStart).toBe(0)
+        expect(input.selectionEnd).toBe('Hero'.length)
+      } finally {
+        handle.unmount()
+      }
+    })
+
     test('panel exposes the canvas width / height fields bound to the store', async () => {
       const s = makeFreshStore()
       const handle = mountComponent(DocumentDrawer, {})