From 032c2e543a6c492aca2b0e78adb652a5ae631540 Mon Sep 17 00:00:00 2001
From: Primo Sabatini <primo.sabatini@gmail.com>
Date: Fri, 17 Dec 2021 18:28:26 -0500
Subject: [PATCH] fix(editable): set focus on EditableInput when
 startsWithEditView is true

---
 .changeset/smart-apes-divide.md           |  6 ++++++
 packages/editable/src/use-editable.ts     |  9 +++++++++
 packages/editable/tests/editable.test.tsx | 13 +++++++++++++
 3 files changed, 28 insertions(+)
 create mode 100644 .changeset/smart-apes-divide.md

diff --git a/.changeset/smart-apes-divide.md b/.changeset/smart-apes-divide.md
new file mode 100644
index 00000000000..3a19afcc7a7
--- /dev/null
+++ b/.changeset/smart-apes-divide.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/editable": patch
+---
+
+When the Editable component has its startsWithEditView set to true, then focus
+should be set to the EditableInput element when the component is mounted.
diff --git a/packages/editable/src/use-editable.ts b/packages/editable/src/use-editable.ts
index 495e1516244..29e2177319c 100644
--- a/packages/editable/src/use-editable.ts
+++ b/packages/editable/src/use-editable.ts
@@ -2,6 +2,7 @@ import {
   useControllableState,
   useFocusOnPointerDown,
   useUpdateEffect,
+  useSafeLayoutEffect,
 } from "@chakra-ui/hooks"
 import { EventKeyMap, mergeRefs, PropGetter } from "@chakra-ui/react-utils"
 import {
@@ -127,6 +128,14 @@ export function useEditable(props: UseEditableProps = {}) {
 
   const isInteractive = !isEditing || !isDisabled
 
+  useSafeLayoutEffect(() => {
+    if (isEditing) {
+      focus(inputRef.current, {
+        selectTextIfInput: selectAllOnFocus,
+      })
+    }
+  }, [])
+
   useUpdateEffect(() => {
     if (!isEditing) {
       focus(editButtonRef.current)
diff --git a/packages/editable/tests/editable.test.tsx b/packages/editable/tests/editable.test.tsx
index 846451edf8e..6e7e3abc04d 100644
--- a/packages/editable/tests/editable.test.tsx
+++ b/packages/editable/tests/editable.test.tsx
@@ -211,3 +211,16 @@ test("can submit on blur", () => {
   fireEvent.blur(input)
   expect(onSubmit).toHaveBeenCalledWith("testing")
 })
+
+test("startWithEditView when true focuses on the input ", () => {
+  render(
+    <Editable startWithEditView={true} defaultValue="Chakra testing">
+      <EditablePreview />
+      <EditableInput data-testid="input" />
+    </Editable>,
+  )
+
+  const input = screen.getByTestId("input")
+
+  expect(document.activeElement === input).toBe(true)
+})