1 files changed, 37 insertions, 9 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index e6db79339..1e54c0628 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -914,12 +914,30 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         );
     }
 
+    @observable private _newCondCache: Record<string, Conditional> = {};
+
+    getParams = (title: string, parameters?: Conditional): Conditional => {
+        if (parameters) return parameters;
+
+        if (!this._newCondCache[title]) {
+            this._newCondCache[title] = observable<Conditional>({
+                field: title,
+                operator: '=',
+                condition: '',
+                target: '',
+                attribute: '',
+                value: ''
+            });
+        }
+        return this._newCondCache[title];
+    };
+
     get dashboardContents() {
         const contentFieldTitles = this.fieldsInfos.filter(field => field.type !== TemplateFieldType.DATA).map(field => field.title).concat('Template');
 
         const conditionForm = (title: string, parameters?: Conditional, empty: boolean = false) => {
 
-            const params: Conditional = parameters ?? this._currEditingConditional;
+            var params: Conditional = this.getParams(title, parameters);
 
             return (
             <div className='form'>
@@ -937,31 +955,41 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                         className="form-row-textarea"
                         onChange={e => runInAction(() => params.condition = e.target.value)}
                         placeholder='value'
-                        defaultValue={params.condition}
+                        value={params.condition}
                     />
                     <div className='form-row-plain-text'>then</div>
                     <div className="operator-options-dropdown">
-                        <span className="operator-dropdown-current">{params.target ?? 'Own'}</span>
+                        <span className="operator-dropdown-current">{params.target}</span>
                         {contentFieldTitles.map(fieldTitle => 
                             <div className='operator-dropdown-option' onPointerDown={() => {params.target = fieldTitle}}>{fieldTitle === title ? 'Own' : fieldTitle}</div>
                         )}
                     </div>
-                    <textarea
+                    <input
                         className="form-row-textarea"
                         onChange={e => runInAction(() => params.attribute = e.target.value)}
                         placeholder='attribute'
-                        defaultValue={params.attribute}
+                        value={params.attribute}
                     />
                     <div className='form-row-plain-text'>{'becomes'}</div>
-                    <textarea
+                    <input
                         className="form-row-textarea"
                         onChange={e => runInAction(() => params.value = e.target.value)}
                         placeholder='value'
-                        defaultValue={params.value}
+                        value={params.value}
                     />
                 </div>
                 {empty ? 
-                <DocCreatorMenuButton icon={'plus'} styles={'float-right border'} function={() => this.templateManager.addFieldCondition(title, params)}/>
+                <DocCreatorMenuButton icon={'plus'} styles={'float-right border'} function={() => {
+                    this._newCondCache[title] = observable<Conditional>({
+                        field: title,
+                        operator: '=',
+                        condition: '',
+                        target: '',
+                        attribute: '',
+                        value: ''
+                    });
+                    this.templateManager.addFieldCondition(title, params);
+                }}/>
                 :
                 <DocCreatorMenuButton icon={'minus'} styles={'float-right border'} function={() => this.templateManager.removeFieldCondition(title, params)}/>
                 }
@@ -1036,7 +1064,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                     }
                     <div className="conditionals-section">
                         <span className="conditionals-title">Conditional Logic</span>
-                        {conditionForm(field.title, this._currEditingConditional, true)}
+                        {conditionForm(field.title, undefined, true)}
                         {this.templateManager.conditionalFieldLogic[field.title]?.map(condition => conditionForm(condition.field, condition))}
                     </div>
                     </>