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( + + + + , + ) + + const input = screen.getByTestId("input") + + expect(document.activeElement === input).toBe(true) +})