[pull] main from tinacms:main

.changeset/purple-keys-compete.md

@@ -0,0 +1,6 @@
+---
+"@tinacms/schema-tools": minor
+"tinacms": minor
+---
+
+✨ Object Schema - Add openFormOnCreate flag. Allowing users to opt-in to automatically going inside an object form when the field is true

packages/@tinacms/schema-tools/src/types/index.ts

@@ -469,8 +469,14 @@ export type ObjectField<WithNamespace extends boolean = false> = (
   | FieldGeneric<string, false, ObjectUiProps>
 ) &
   MaybeNamespace<WithNamespace> &
-  BaseField &
-  (
+  BaseField & {
+    /**
+     * @default false
+     * When `list: true`, automatically opens the form for newly created list items.
+     * When used without `list: true`, this does not do anything.
+     */
+    openFormOnCreate?: boolean;
+  } & (
     | {
         type: 'object';
         fields: Field<WithNamespace>[];

packages/tinacms/src/toolkit/fields/plugins/group-list-field-plugin.tsx

@@ -13,6 +13,7 @@ interface GroupFieldDefinititon extends Field {
   component: 'group';
   fields: Field[];
   defaultItem?: object | (() => object);
+  openFormOnCreate?: boolean;
   addItemBehavior?: 'append' | 'prepend';
   /**
    * An optional function which generates `props` for
@@ -46,6 +47,9 @@ interface GroupProps {
 }
 
 const Group = ({ tinaForm, form, field, input, meta, index }: GroupProps) => {
+  const cms = useCMS();
+  const { dispatch: setFocusedField } =
+    useEvent<FieldFocusEvent>('field:focus');
   const addItem = React.useCallback(() => {
     let obj = {};
     if (typeof field.defaultItem === 'function') {
@@ -58,6 +62,26 @@ const Group = ({ tinaForm, form, field, input, meta, index }: GroupProps) => {
     } else {
       form.mutators.push(field.name, obj);
     }
+    if (field.openFormOnCreate) {
+      const state = tinaForm.finalForm.getState();
+      const newIndex = field.addItemBehavior === 'prepend' ? 0 : items.length;
+      if (state.invalid === true) {
+        // @ts-ignore
+        cms.alerts.error('Cannot navigate away from an invalid form.');
+        return;
+      }
+      cms.dispatch({
+        type: 'forms:set-active-field-name',
+        value: {
+          formId: tinaForm.id,
+          fieldName: `${field.name}.${newIndex}`,
+        },
+      });
+      setFocusedField({
+        id: tinaForm.id,
+        fieldName: `${field.name}.${newIndex}`,
+      });
+    }
   }, [form, field]);
 
   const items = input.value || [];