fix(editable): set focus on EditableInput when startsWithEditView is …

…true

.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.

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)

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)
+})