refactor: editable logic

Author: segunadebayo

.changeset/modern-cougars-punch.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/editable": patch
+---
+
+Fix issue where input value fails to revert after repeated full deletion

e2e/editable.e2e.ts

@@ -1,5 +1,6 @@
 import { test } from "@playwright/test"
 import { EditableModel } from "./models/editable.model"
+import { repeat } from "./_utils"
 
 let I: EditableModel
 
@@ -89,4 +90,14 @@ test.describe("editable", () => {
     await I.seeInput()
     await I.seeInputIsFocused()
   })
+
+  test("revert value after repeated full deletion", async () => {
+    await repeat(3, async () => {
+      await I.focusPreview()
+      await I.seeInputHasValue("Hello World")
+      await I.pressKey("Backspace")
+      await I.clickCancel()
+      await I.seePreviewHasText("Hello World")
+    })
+  })
 })

e2e/models/editable.model.ts

@@ -31,6 +31,10 @@ export class EditableModel extends Model {
     return this.page.locator("[data-testid=edit-button]")
   }
 
+  get cancelTrigger() {
+    return this.page.locator("[data-testid=cancel-button]")
+  }
+
   async focusPreview() {
     await this.preview.focus()
     await this.page.waitForSelector("input:focus")
@@ -48,6 +52,10 @@ export class EditableModel extends Model {
     return this.submitTrigger.click()
   }
 
+  clickCancel() {
+    return this.cancelTrigger.click()
+  }
+
   dblClickPreview() {
     return this.preview.dblclick()
   }

packages/machines/editable/src/editable.machine.ts

@@ -76,7 +76,7 @@ export const machine = createMachine<EditableSchema>({
 
   states: {
     preview: {
-      entry: ["blurInputIfNeeded"],
+      entry: ["blurInput"],
       on: {
         "CONTROLLED.EDIT": {
           target: "edit",
@@ -97,6 +97,7 @@ export const machine = createMachine<EditableSchema>({
 
     edit: {
       effects: ["trackInteractOutside"],
+      entry: ["syncInputValue"],
       on: {
         "CONTROLLED.PREVIEW": [
           {
@@ -227,7 +228,7 @@ export const machine = createMachine<EditableSchema>({
         if (!value) return
         context.set("value", value)
       },
-      blurInputIfNeeded({ scope }) {
+      blurInput({ scope }) {
         dom.getInputEl(scope)?.blur()
       },
     },