diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index 066486f50..8ce047fe3 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -177,3 +177,15 @@ test("Bug 7489 - Workspace-palette items stay hidden when opening with keyboard- ), ).toBeVisible(); }); + +test("Bug 8784 - Use keyboard arrow to move inside a text input does not change tabs", async ({ + page, +}) => { + const workspacePage = new WorkspacePage(page); + await workspacePage.setupEmptyFile(); + await workspacePage.goToWorkspace(); + await workspacePage.pageName.click(); + await page.keyboard.press("ArrowLeft"); + + await expect(workspacePage.pageName).toHaveText("Page 1"); +}); diff --git a/frontend/src/app/main/ui/ds/tab_switcher.cljs b/frontend/src/app/main/ui/ds/tab_switcher.cljs index 521ec239f..fa17d1bc3 100644 --- a/frontend/src/app/main/ui/ds/tab_switcher.cljs +++ b/frontend/src/app/main/ui/ds/tab_switcher.cljs @@ -175,8 +175,7 @@ class (dm/str class " " (stl/css :tabs)) - props (mf/spread-props props {:class class - :on-key-down on-key-down})] + props (mf/spread-props props {:class class})] (mf/with-effect [tabs] (mf/set-ref-val! tabs-ref tabs)) @@ -188,6 +187,7 @@ :tabs tabs :on-ref on-ref :selected selected + :on-key-down on-key-down :on-click on-click}]] (let [active-tab (get-tab tabs selected) diff --git a/frontend/src/app/main/ui/ds/tab_switcher.scss b/frontend/src/app/main/ui/ds/tab_switcher.scss index e8df69e6c..0b24f3343 100644 --- a/frontend/src/app/main/ui/ds/tab_switcher.scss +++ b/frontend/src/app/main/ui/ds/tab_switcher.scss @@ -101,7 +101,17 @@ } .tab-panel { + --tab-panel-outline-color: none; + &:focus { + outline: none; + } + + &:focus-visible { + --tab-panel-outline-color: var(--color-accent-primary); + } + display: grid; width: 100%; height: 100%; + outline: $b-1 solid var(--tab-panel-outline-color); }