chore(Form): Update Form shadow to Volto 16.17.1 #122 from eea/form-c…

…ustomization-to-volto-16-17-1
eea · Mar 17, 2023 · 5815668 · 5815668
2 parents 97057a8 + 36d5f2c
commit 5815668
Showing 1 changed file with 16 additions and 7 deletions.
diff --git a/src/customizations/volto/components/manage/Form/Form.jsx b/src/customizations/volto/components/manage/Form/Form.jsx
@@ -180,10 +180,11 @@ class Form extends Component {
       formData.hasOwnProperty(blocksLayoutFieldname) &&
       formData[blocksLayoutFieldname].items.length > 0
     ) {
-      selectedBlock = formData[blocksLayoutFieldname].items[0];
-
-      if (config.blocks?.initialBlocksFocus?.[this.props.type]) {
-        //Default selected is not the first block, but the one from config.
+      if (config.blocks?.initialBlocksFocus === null) {
+        selectedBlock = null;
+      } else if (this.props.type in config.blocks?.initialBlocksFocus) {
+        // Default selected is not the first block, but the one from config.
+        // TODO Select first block and not an arbitrary one.
         Object.keys(formData[blocksFieldname]).forEach((b_key) => {
           if (
             formData[blocksFieldname][b_key]['@type'] ===
@@ -192,8 +193,11 @@ class Form extends Component {
             selectedBlock = b_key;
           }
         });
+      } else {
+        selectedBlock = formData[blocksLayoutFieldname].items[0];
       }
     }
+
     this.state = {
       formData,
       initialFormData: cloneDeep(formData),
@@ -254,7 +258,11 @@ class Form extends Component {
    * Tab selection is done only by setting activeIndex in state
    */
   onTabChange(e, { activeIndex }) {
-    this.setState({ activeIndex });
+    const defaultFocus = this.props.schema.fieldsets[activeIndex].fields[0];
+    this.setState({
+      activeIndex,
+      ...(defaultFocus ? { inFocus: { [defaultFocus]: true } } : {}),
+    });
   }
 
   /**
@@ -641,7 +649,7 @@ class Form extends Component {
           error={keys(this.state.errors).length > 0}
           className={settings.verticalFormTabs ? 'vertical-form' : ''}
         >
-          <fieldset className="invisible" disabled={!this.props.editable}>
+          <fieldset className="invisible">
             <Segment.Group raised>
               {schema && schema.fieldsets.length > 1 && (
                 <>
@@ -678,10 +686,11 @@ class Form extends Component {
                         ...map(item.fields, (field, index) => (
                           <Field
                             {...schema.properties[field]}
+                            isDisabled={!this.props.editable}
                             id={field}
                             formData={this.state.formData}
                             fieldSet={item.title.toLowerCase()}
-                            focus={index === 0}
+                            focus={this.state.inFocus[field]}
                             value={this.state.formData?.[field]}
                             required={schema.required.indexOf(field) !== -1}
                             onChange={this.onChangeField}