diff --git a/e2e/playwright/regression-tests.spec.ts b/e2e/playwright/regression-tests.spec.ts index 00f4c693b..74ad8f7fa 100644 --- a/e2e/playwright/regression-tests.spec.ts +++ b/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 () => { diff --git a/src/components/CommandBar/CommandArgOptionInput.tsx b/src/components/CommandBar/CommandArgOptionInput.tsx index b1fcd1d2f..b35958c06 100644 --- a/src/components/CommandBar/CommandArgOptionInput.tsx +++ b/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 diff --git a/src/components/CommandBarOpenButton.tsx b/src/components/CommandBarOpenButton.tsx index bafed0bb9..9bf053515 100644 --- a/src/components/CommandBarOpenButton.tsx +++ b/src/components/CommandBarOpenButton.tsx @@ -11,6 +11,7 @@ export function CommandBarOpenButton() {