Editable: setting controlled value does not propagate into Editable's internal value

[kk21]

Description

Using React useState to control the value of Editable, calling setState does not seem to change the internal value of Editable.

Link to Reproduction

https://codesandbox.io/s/naughty-glade-ufqr78?file=/pages/index.tsx

Steps to reproduce

1. The name state is set to "John" in useEffect once initially
2. Click on the Editable text: "John"
3. You can change, or not to change the Editable text.
4. Press Escape key to abort.
5. Editable shows placeholder text and the name state becomes the default empty string specified in useState("")

Chakra UI Version

1.8.6

Browser

Google Chrome 99

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[TimKolberger]

Thank you for creating a reproduction! ✨

I updated the codesandbox with some logs to get more insight: https://codesandbox.io/s/chakra-ui-issue-5670-j0q3p5?file=/src/App.tsx

Seems like the previous value inside Editable is only updated, if Editable itself initiates the update.
It is not updated if the valueProp is changing.

chakra-ui/packages/editable/src/use-editable.ts

Lines 107 to 117 in 577aeb9

	const [value, setValue] = useControllableState({
	defaultValue: defaultValue || "",
	value: valueProp,
	onChange: onChangeProp,
	})
	/**
	* Keep track of the previous value, so if users
	* presses `cancel`, we can revert to it.
	*/
	const [prevValue, setPrevValue] = useState(value)

The linked PR did not introduce the issue, it was already present in 1.7.2.

I think it is missing an Effect similar to this:

React.useEffect(() => {
  setPreviousValue(valueProp)
}, [valueProp])

[TimKolberger]

I think a more straight forward solution would be to set setPrevValue(valueProp) in the onEdit callback, to use the most recent "previous" value in favor of the proposed effect.

[takethefake]

Hej @TimKolberger @kk21

I also took a look at this and came to another approach which gives the user a little bit more control regarding the prevValue

I made prevValue a controllable prop that can be updated outside the scope of editable. this way you could update the prevValue in the useEffect as well.

by registering to onChangePrevValue you would get updates if the internal state would be updated.

But setting the value in the onEdit-callback seems a bit cleaner to me. will change my pr accordingly

[takethefake]

When adjusting my PR I noticed one drawback to call setPrevValue in onEdit

when startWithEditView is true onEdit isn't called, since it is only called onFocus on the preview component.

which leaves us with the same error

[takethefake]

@TimKolberger will now set the prevValue on the onFocus-Event on the input and preview component. Adjusted my PR accordingly.