feat: add props to editable (#7403)

.changeset/strong-pianos-report.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/editable": major
+---
+
+Adds finalFocusRef and onBlur to Editable component

packages/components/editable/src/use-editable.ts

@@ -6,7 +6,11 @@ import { mergeRefs } from "@chakra-ui/react-use-merge-refs"
 import { useCallbackRef } from "@chakra-ui/react-use-callback-ref"
 import { ariaAttr, callAllHandlers } from "@chakra-ui/shared-utils"
 import { PropGetter } from "@chakra-ui/react-types"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState, RefObject } from "react"
+
+interface FocusableElement {
+  focus(options?: FocusOptions): void
+}
 
 export interface UseEditableProps {
   /**
@@ -53,6 +57,11 @@ export interface UseEditableProps {
    * Callback invoked once the user enters edit mode.
    */
   onEdit?: () => void
+  /**
+   * Callback invoked when the user either submits or cancels.
+   * It provides the last confirmed value as argument.
+   */
+  onBlur?: (nextValue: string) => void
   /**
    * If `true`, the input's text will be highlighted on focus.
    * @default true
@@ -62,6 +71,10 @@ export interface UseEditableProps {
    * The placeholder text when the value is empty.
    */
   placeholder?: string
+  /**
+   * The `ref` of element to receive focus when the modal closes.
+   */
+  finalFocusRef?: RefObject<FocusableElement>
 }
 
 function contains(parent: HTMLElement | null, child: HTMLElement) {
@@ -79,6 +92,7 @@ export function useEditable(props: UseEditableProps = {}) {
     onChange: onChangeProp,
     onCancel: onCancelProp,
     onSubmit: onSubmitProp,
+    onBlur: onBlurProp,
     value: valueProp,
     isDisabled,
     defaultValue,
@@ -88,6 +102,7 @@ export function useEditable(props: UseEditableProps = {}) {
     selectAllOnFocus = true,
     placeholder,
     onEdit: onEditCallback,
+    finalFocusRef,
     ...htmlProps
   } = props
 
@@ -136,7 +151,11 @@ export function useEditable(props: UseEditableProps = {}) {
 
   useUpdateEffect(() => {
     if (!isEditing) {
-      editButtonRef.current?.focus()
+      if (finalFocusRef) {
+        finalFocusRef.current?.focus()
+      } else {
+        editButtonRef.current?.focus()
+      }
       return
     }
 
@@ -163,12 +182,14 @@ export function useEditable(props: UseEditableProps = {}) {
     setIsEditing(false)
     setValue(prevValue)
     onCancelProp?.(prevValue)
-  }, [onCancelProp, setValue, prevValue])
+    onBlurProp?.(prevValue)
+  }, [onCancelProp, onBlurProp, setValue, prevValue])
 
   const onSubmit = useCallback(() => {
     setIsEditing(false)
     setPrevValue(value)
     onSubmitProp?.(value)
+    onBlurProp?.(prevValue)
   }, [value, onSubmitProp])
 
   useEffect(() => {

packages/components/editable/stories/editable.stories.tsx

@@ -167,3 +167,22 @@ export const Disabled = () => (
     <EditableControls />
   </Editable>
 )
+
+export const FinalFocusRef = () => {
+  const finalFocusRef = React.useRef(null)
+
+  return (
+    <>
+      <input ref={finalFocusRef} />
+      <Editable
+        finalFocusRef={finalFocusRef}
+        defaultValue="Final fantasy"
+        fontSize="xl"
+      >
+        <EditablePreview />
+        <EditableInput />
+        <EditableControls />
+      </Editable>
+    </>
+  )
+}

packages/components/editable/tests/editable.test.tsx

@@ -81,6 +81,7 @@ test("controlled: handles callbacks correctly", async () => {
   const onCancel = jest.fn()
   const onSubmit = jest.fn()
   const onEdit = jest.fn()
+  const onBlur = jest.fn()
 
   const Component = () => {
     const [value, setValue] = React.useState("")
@@ -90,6 +91,7 @@ test("controlled: handles callbacks correctly", async () => {
           setValue(val)
           onChange(val)
         }}
+        onBlur={onBlur}
         onCancel={onCancel}
         onSubmit={onSubmit}
         onEdit={onEdit}
@@ -128,8 +130,11 @@ test("controlled: handles callbacks correctly", async () => {
   // press `Escape`
   fireEvent.keyDown(input, { key: "Escape" })
 
-  // calls `onCancel` with previous `value`
+  // calls `onSubmit` with previous `value`
   expect(onSubmit).toHaveBeenCalledWith("World")
+
+  // calls `onBlur` with previous value
+  expect(onBlur).toHaveBeenCalledWith("World")
 })
 
 test("handles preview and input callbacks", async () => {
@@ -292,3 +297,39 @@ test("should not be interactive when disabled", async () => {
   await user.click(screen.getByText(/editable/))
   expect(screen.getByTestId("input")).not.toBeVisible()
 })
+
+test("should return focus to button when closed", async () => {
+  const Component = () => {
+    const buttonRef = React.useRef(null)
+    return (
+      <>
+        <button type="button" ref={buttonRef} data-testid="button">
+          Open
+        </button>
+        <Editable finalFocusRef={buttonRef} defaultValue="editable">
+          <EditablePreview data-testid="preview" />
+          <EditableInput data-testid="input" />
+        </Editable>
+        ,
+      </>
+    )
+  }
+
+  const screen = render(<Component />)
+
+  const preview = screen.getByTestId("preview")
+  const input = screen.getByTestId("input")
+  const button = screen.getByTestId("button")
+
+  await screen.user.click(preview)
+
+  // make sure button isn't focused at the start
+  expect(button).not.toHaveFocus()
+  expect(input).toHaveFocus()
+
+  // blur the input
+  fireEvent.blur(input)
+
+  // wait for button to be focused
+  await waitFor(() => expect(button).toHaveFocus())
+})