whoops

exercises/08.focus/01.solution/index.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react'
+import { flushSync } from 'react-dom'
 import * as ReactDOM from 'react-dom/client'
 
 function EditableText({
@@ -17,18 +18,18 @@ function EditableText({
 	const [edit, setEdit] = useState(false)
 	const [value, setValue] = useState(initialValue)
 	const inputRef = useRef<HTMLInputElement>(null)
-	// 🐨 add a button ref here
+	const buttonRef = useRef<HTMLButtonElement>(null)
 
 	return edit ? (
 		<form
 			method="post"
 			onSubmit={event => {
 				event.preventDefault()
-				// here's where you'd send the updated value to the server
-				// 🐨 wrap these calls in a flushSync
-				setValue(inputRef.current?.value ?? '')
-				setEdit(false)
-				// 🐨 after flushSync, focus the button with the button ref
+				flushSync(() => {
+					setValue(inputRef.current?.value ?? '')
+					setEdit(false)
+				})
+				buttonRef.current?.focus()
 			}}
 		>
 			<input
@@ -41,28 +42,31 @@ function EditableText({
 				defaultValue={value}
 				onKeyDown={event => {
 					if (event.key === 'Escape') {
-						// 🐨 wrap this in a flushSync
-						setEdit(false)
-						// 🐨 after the flushSync, focus the button
+						flushSync(() => {
+							setEdit(false)
+						})
+						buttonRef.current?.focus()
 					}
 				}}
 				onBlur={event => {
-					// 🐨 wrap these in a flushSync
-					setValue(event.currentTarget.value)
-					setEdit(false)
-					// 🐨 after the flushSync, focus the button
+					flushSync(() => {
+						setValue(event.currentTarget.value)
+						setEdit(false)
+					})
+					buttonRef.current?.focus()
 				}}
 			/>
 		</form>
 	) : (
 		<button
 			aria-label={buttonLabel}
-			// 🐨 add a ref prop for the button
+			ref={buttonRef}
 			type="button"
 			onClick={() => {
-				// 🐨 wrap this in a flushSync
-				setEdit(true)
-				// 🐨 after the flushSync, select all the text of the input
+				flushSync(() => {
+					setEdit(true)
+				})
+				inputRef.current?.select()
 			}}
 		>
 			{value || 'Edit'}