fix(react-tinacms-inline): some fields were mis-handling focus

#1516
tinacms · Oct 8, 2020 · 5d7318c · 5d7318c
1 parent a37c091
commit 5d7318c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/packages/react-tinacms-editor/src/tinacms-inline/inline-wysiwyg.tsx b/packages/react-tinacms-editor/src/tinacms-inline/inline-wysiwyg.tsx
@@ -77,7 +77,12 @@ export function InlineWysiwyg({
     <InlineField name={name}>
       {({ input }: any) => {
         return (
-          <FocusRing name={name} options={focusRing}>
+          /**
+           * Note: We use `input.name` not `name` here because
+           * the given name is only relative to the block, not
+           * the absolute path in the form.
+           */
+          <FocusRing name={input.name} options={focusRing}>
             <Wysiwyg input={input} {...wysiwygProps} imageProps={imageProps} />
           </FocusRing>
         )

diff --git a/packages/react-tinacms-inline/src/fields/inline-text-field.tsx b/packages/react-tinacms-inline/src/fields/inline-text-field.tsx
@@ -61,7 +61,12 @@ export function InlineText({
           }
 
           return (
-            <FocusRing name={name} options={focusRing}>
+            /**
+             * Note: We use `input.name` not `name` here because
+             * the given name is only relative to the block, not
+             * the absolute path in the form.
+             */
+            <FocusRing name={input.name} options={focusRing}>
               <Input
                 type="text"
                 {...input}

diff --git a/packages/react-tinacms-inline/src/fields/inline-textarea-field.tsx b/packages/react-tinacms-inline/src/fields/inline-textarea-field.tsx
@@ -55,7 +55,12 @@ export function InlineTextarea({
           }
 
           return (
-            <FocusRing name={name} options={focusRing}>
+            /**
+             * Note: We use `input.name` not `name` here because
+             * the given name is only relative to the block, not
+             * the absolute path in the form.
+             */
+            <FocusRing name={input.name} options={focusRing}>
               <Textarea
                 className={className}
                 {...input}