fix(editable): chakra-ui#5670 call setPrevValue in onEdit to avoid ou…

…tdated data when controlled

.changeset/dry-worms-invent.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/editable": patch
+---
+
+Call `setPrevValue` onEdit to avoid an outdated prev value when the field is
+controlled

packages/editable/src/use-editable.ts

@@ -156,10 +156,11 @@ export function useEditable(props: UseEditableProps = {}) {
   }, [isEditing, onEditProp, selectAllOnFocus])
 
   const onEdit = useCallback(() => {
+    setPrevValue(value)
     if (isInteractive) {
       setIsEditing(true)
     }
-  }, [isInteractive])
+  }, [isInteractive, value])
 
   const onCancel = useCallback(() => {
     setIsEditing(false)

packages/editable/stories/editable.stories.tsx

@@ -8,6 +8,7 @@ import {
   EditableTextarea,
   useEditableControls,
 } from "../src"
+import { Heading } from "@chakra-ui/layout"
 
 export default {
   title: "Components / Forms / Editable",
@@ -125,3 +126,36 @@ export const TextareaAsInput = () => {
     </Editable>
   )
 }
+
+export const EditableEventHandler = () => {
+  const [name, setName] = React.useState("")
+  console.log("State 'name' is ", name)
+
+  React.useEffect(() => {
+    setName("John")
+  }, [])
+
+  return (
+    <>
+      <Heading>Name State=[{name}]</Heading>
+      <Editable
+        value={name}
+        onChange={(value) => {
+          console.log("onChange called with ", value)
+        }}
+        onSubmit={(value) => {
+          console.log("onSubmit called with ", value)
+          setName(value)
+        }}
+        onCancel={(value) => {
+          console.log("onCancel called with ", value)
+          setName(value)
+        }}
+        placeholder="Enter your name"
+      >
+        <EditablePreview />
+        <EditableInput />
+      </Editable>
+    </>
+  )
+}

packages/editable/tests/editable.test.tsx

@@ -224,3 +224,46 @@ test("startWithEditView when true focuses on the input ", () => {
 
   expect(document.activeElement === input).toBe(true)
 })
+
+test.each([{ startWithEditView: true }, { startWithEditView: false }])(
+  "controlled: sets value correct onCancel, startWithEditView: $startWithEditView",
+  ({ startWithEditView }) => {
+    const Component = () => {
+      const [name, setName] = React.useState("")
+
+      React.useEffect(() => {
+        setName("John")
+      }, [])
+
+      return (
+        <Editable
+          value={name}
+          startWithEditView={startWithEditView}
+          onChange={(value) => {
+            setName(value)
+          }}
+          onSubmit={(value) => {
+            setName(value)
+          }}
+          onCancel={(value) => {
+            setName(value)
+          }}
+          placeholder="Enter your name"
+        >
+          <EditablePreview data-testid="preview" />
+          <EditableInput data-testid="input" />
+        </Editable>
+      )
+    }
+
+    render(<Component />)
+    const input = screen.getByTestId("input")
+    const preview = screen.getByTestId("preview")
+    if (!startWithEditView) {
+      fireEvent.focus(preview)
+    }
+    fireEvent.keyDown(input, { key: "Escape" })
+
+    expect(preview).toHaveTextContent("John")
+  },
+)