[PR Feedback] Remove autoFocus from both the read mode button and edit mode input in favor of manual focus management. Created a ref/useEffect combo that keeps track of the state and sets focus on the edit mode input only when the read mode button is clicked.

breehall · breehall · commit c48ee4f057c5 · 2023-05-01T20:37:08.000-04:00
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
@@ -13,6 +13,8 @@ import React, {
   HTMLAttributes,
   MouseEvent,
   KeyboardEvent,
+  useRef,
+  useEffect,
 } from 'react';
 import classNames from 'classnames';
 
@@ -146,6 +148,14 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   const [editModeValue, setEditModeValue] = useState(defaultValue);
   const [readModeValue, setReadModeValue] = useState(defaultValue);
 
+  const editModeInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      editModeInputRef.current?.focus();
+    }
+  }, [isEditing]);
+
   const cancelInlineEdit = () => {
     setEditModeValue(readModeValue);
     setIsEditing(false);
@@ -186,12 +196,12 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
           >
             <EuiFieldText
               id={inlineEditInputId}
+              inputRef={editModeInputRef}
               value={editModeValue}
               onChange={(e) => {
                 setEditModeValue(e.target.value);
               }}
               aria-label={inputAriaLabel}
-              autoFocus
               compressed={sizes.compressed}
               isInvalid={isInvalid}
               isLoading={isLoading}
@@ -265,13 +275,12 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
       color="text"
       iconType="pencil"
       iconSide="right"
-      autoFocus
       flush="both"
       iconSize={sizes.iconSize}
       size={sizes.buttonSize}
       data-test-subj="euiInlineReadModeButton"
       {...readModeProps}
-      onClick={(e) => {
+      onClick={(e: MouseEvent<HTMLButtonElement>) => {
         setIsEditing(true);
         readModeProps?.onClick?.(e);
       }}
