fix: users shouldn't have to press down arrow twice to select an option (#3809)

* fix: users shouldn't have to press down arrow twice to select an option

* add regression test for cmd bar arrow

* tweak

e2e/playwright/regression-tests.spec.ts

@@ -54,6 +54,67 @@ const sketch001 = startSketchAt([-0, -0])
     const crypticErrorText = `ApiError`
     await expect(page.getByText(crypticErrorText).first()).toBeVisible()
   })
+  test('user should not have to press down twice in cmdbar', async ({
+    page,
+  }) => {
+    // because the model has `line([0,0]..` it is valid code, but the model is invalid
+    // regression test for https://github.com/KittyCAD/modeling-app/issues/3251
+    // Since the bad model also found as issue with the artifact graph, which in tern blocked the editor diognostics
+    const u = await getUtils(page)
+    await page.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `const sketch2 = startSketchOn("XY")
+const sketch001 = startSketchAt([-0, -0])
+  |> line([0, 0], %)
+  |> line([-4.84, -5.29], %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)
+  |> close(%)`
+      )
+    })
+
+    await page.setViewportSize({ width: 1000, height: 500 })
+
+    await page.goto('/')
+    await u.waitForPageLoad()
+
+    await test.step('Check arrow down works', async () => {
+      await page.getByTestId('command-bar-open-button').click()
+
+      await page
+        .getByRole('option', { name: 'floppy disk arrow Export' })
+        .click()
+
+      // press arrow down key twice
+      await page.keyboard.press('ArrowDown')
+      await page.waitForTimeout(100)
+      await page.keyboard.press('ArrowDown')
+
+      // STL is the third option, which makes sense for two arrow downs
+      await expect(page.locator('[data-headlessui-state="active"]')).toHaveText(
+        'STL'
+      )
+
+      await page.keyboard.press('Escape')
+      await page.waitForTimeout(200)
+      await page.keyboard.press('Escape')
+      await page.waitForTimeout(200)
+    })
+
+    await test.step('Check arrow up works', async () => {
+      // theme in test is dark, which is the second option, which means we can test arrow up
+      await page.getByTestId('command-bar-open-button').click()
+
+      await page.getByText('The overall appearance of the').click()
+
+      await page.keyboard.press('ArrowUp')
+      await page.waitForTimeout(100)
+
+      await expect(page.locator('[data-headlessui-state="active"]')).toHaveText(
+        'light'
+      )
+    })
+  })
   test('executes on load', async ({ page }) => {
     const u = await getUtils(page)
     await page.addInitScript(async () => {

src/components/CommandBar/CommandArgOptionInput.tsx

@@ -71,6 +71,17 @@ function CommandArgOptionInput({
     inputRef.current?.focus()
     inputRef.current?.select()
   }, [inputRef])
+  useEffect(() => {
+    // work around to make sure the user doesn't have to press the down arrow key to focus the first option
+    // instead this makes it move from the first hit
+    const downArrowEvent = new KeyboardEvent('keydown', {
+      key: 'ArrowDown',
+      keyCode: 40,
+      which: 40,
+      bubbles: true,
+    })
+    inputRef?.current?.dispatchEvent(downArrowEvent)
+  }, [])
 
   // Filter the options based on the query,
   // resetting the query when the options change

src/components/CommandBarOpenButton.tsx

@@ -11,6 +11,7 @@ export function CommandBarOpenButton() {
     <button
       className="group rounded-full flex items-center justify-center gap-2 px-2 py-1 bg-primary/10 dark:bg-chalkboard-90 dark:backdrop-blur-sm border-primary hover:border-primary dark:border-chalkboard-50 dark:hover:border-inherit text-primary dark:text-inherit"
       onClick={() => commandBarSend({ type: 'Open' })}
+      data-testid="command-bar-open-button"
     >
       <span>Commands</span>
       <kbd className="bg-primary/10 dark:bg-chalkboard-80 dark:group-hover:bg-primary font-mono rounded-sm dark:text-inherit inline-block px-1 border-primary dark:border-chalkboard-90">