fix(splitter): handle focus while resize trigger is hovered (#3226)

Author: segunadebayo

.changeset/splitter-hover-focus.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/splitter": patch
+---
+
+Fix keyboard resizing when a resize trigger receives focus while hovered.

e2e/splitter.e2e.ts

@@ -28,6 +28,27 @@ test.describe("splitter", () => {
     expect(page.locator(part("resize-trigger")).nth(1)).toHaveAttribute("aria-valuenow", "36")
   })
 
+  test("should resize with keyboard when focused after hover", async ({ page }) => {
+    const trigger = page.locator(part("resize-trigger")).first()
+
+    await page.locator("main").evaluate((main) => {
+      const button = document.createElement("button")
+      button.textContent = "Before splitter"
+      main.prepend(button)
+      button.focus()
+    })
+
+    await trigger.hover()
+    await page.keyboard.press("Tab")
+
+    await expect(trigger).toBeFocused()
+    const value = Number(await trigger.getAttribute("aria-valuenow"))
+
+    await page.keyboard.press("ArrowRight")
+
+    await expect(trigger).toHaveAttribute("aria-valuenow", String(value + 1))
+  })
+
   test("should decrease panel when arrow left pressed", async ({ page }) => {
     await page.click("main")
 

packages/machines/splitter/src/splitter.machine.ts

@@ -155,6 +155,10 @@ export const machine = createMachine<SplitterSchema>({
         HOVER_DELAY: {
           target: "hover",
         },
+        FOCUS: {
+          target: "focused",
+          actions: ["setKeyboardState"],
+        },
         POINTER_DOWN: {
           target: "dragging",
           actions: ["setDraggingState"],
@@ -168,6 +172,10 @@ export const machine = createMachine<SplitterSchema>({
     hover: {
       tags: ["focus"],
       on: {
+        FOCUS: {
+          target: "focused",
+          actions: ["setKeyboardState"],
+        },
         POINTER_DOWN: {
           target: "dragging",
           actions: ["setDraggingState"],