[form-builder] Use FocusManager with inline items (#826)

sanity-io · May 23, 2018 · 69e3bbd · 69e3bbd
1 parent bdc174e
commit 69e3bbd
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/ItemForm.js b/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/ItemForm.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import FormBuilderPropTypes from '../../FormBuilderPropTypes'
+import FocusManager from '../../sanity/focusManagers/SimpleFocusManager'
 
 export default class ItemForm extends React.PureComponent {
   static propTypes = {
@@ -31,6 +32,20 @@ export default class ItemForm extends React.PureComponent {
       return <div>No input component resolved for type {`"${type.name}"`}</div>
     }
 
-    return <InputComponent value={value} type={type} level={level} onChange={this.handleChange} />
+    return (
+      <FocusManager>
+        {({onFocus, onBlur, focusPath}) => (
+          <InputComponent
+            value={value}
+            type={type}
+            level={level}
+            onChange={this.handleChange}
+            onFocus={onFocus}
+            focusPath={focusPath}
+            onBlur={onBlur}
+          />
+        )}
+      </FocusManager>
+    )
   }
 }
diff --git a/packages/test-studio/schemas/blocks.js b/packages/test-studio/schemas/blocks.js
@@ -153,7 +153,21 @@ export default {
       title: 'Customized with block types',
       type: 'array',
       of: [
-        {type: 'image', title: 'Image', options: {inline: true}},
+        {
+          type: 'image',
+          title: 'Image',
+          fields: [
+            {title: 'Caption', name: 'caption', type: 'string', options: {isHighlighted: true}},
+            {
+              title: 'Authors',
+              name: 'authors',
+              type: 'array',
+              options: {isHighlighted: true},
+              of: [{type: 'author', title: 'Author'}]
+            }
+          ],
+          options: {inline: true}
+        },
         {type: 'author', title: 'Author'},
         {
           type: 'block',