1 files changed, 25 insertions, 13 deletions
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index d2325a807..9aab53daf 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, Field, FieldResult } from '../../../fields/Doc';
 import { List } from '../../../fields/List';
@@ -6,7 +6,7 @@ import { RichTextField } from '../../../fields/RichTextField';
 import { ComputedField, ScriptField } from '../../../fields/ScriptField';
 import { DocCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
-import { returnAll, returnAlways, returnTrue } from '../../../Utils';
+import { copyProps, returnAll, returnAlways, returnTrue } from '../../../Utils';
 import { Docs } from '../../documents/Documents';
 import { SetupDrag } from '../../util/DragManager';
 import { CompiledScript, CompileScript, ScriptOptions } from '../../util/Scripting';
@@ -38,8 +38,20 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     private _keyInput = React.createRef<HTMLInputElement>();
     private _valInput = React.createRef<HTMLInputElement>();
 
+    _prevProps: FieldViewProps;
+    @observable _props: FieldViewProps;
+    constructor(props: FieldViewProps) {
+        super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
+    }
+
+    componentDidUpdate() {
+        copyProps(this);
+    }
+
     componentDidMount() {
-        this.props.setContentView?.(this);
+        this._props.setContentView?.(this);
     }
     isKeyValueBox = returnTrue;
     able = returnAlways;
@@ -50,7 +62,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     @observable _splitPercentage = 50;
 
     get fieldDocToLayout() {
-        return this.props.fieldKey ? DocCast(this.props.Document[this.props.fieldKey], DocCast(this.props.Document)) : this.props.Document;
+        return this._props.fieldKey ? DocCast(this._props.Document[this._props.fieldKey], DocCast(this._props.Document)) : this._props.Document;
     }
 
     @action
@@ -109,7 +121,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     }
 
     onPointerDown = (e: React.PointerEvent): void => {
-        if (e.buttons === 1 && this.props.isSelected()) {
+        if (e.buttons === 1 && this._props.isSelected()) {
             e.stopPropagation();
         }
     };
@@ -155,8 +167,8 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
             rows.push(
                 <KeyValuePair
                     doc={realDoc}
-                    addDocTab={this.props.addDocTab}
-                    PanelWidth={this.props.PanelWidth}
+                    addDocTab={this._props.addDocTab}
+                    PanelWidth={this._props.PanelWidth}
                     PanelHeight={this.rowHeight}
                     ref={(function () {
                         let oldEl: KeyValuePair | undefined;
@@ -220,19 +232,19 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     getFieldView = () => {
         const rows = this.rows.filter(row => row.isChecked);
         if (rows.length > 1) {
-            const parent = Docs.Create.StackingDocument([], { _layout_autoHeight: true, _width: 300, title: `field views for ${DocCast(this.props.Document).title}`, _chromeHidden: true });
+            const parent = Docs.Create.StackingDocument([], { _layout_autoHeight: true, _width: 300, title: `field views for ${DocCast(this._props.Document).title}`, _chromeHidden: true });
             for (const row of rows) {
-                const field = this.createFieldView(DocCast(this.props.Document), row);
+                const field = this.createFieldView(DocCast(this._props.Document), row);
                 field && Doc.AddDocToList(parent, 'data', field);
                 row.uncheck();
             }
             return parent;
         }
-        return rows.length ? this.createFieldView(DocCast(this.props.Document), rows.lastElement()) : undefined;
+        return rows.length ? this.createFieldView(DocCast(this._props.Document), rows.lastElement()) : undefined;
     };
 
     createFieldView = (templateDoc: Doc, row: KeyValuePair) => {
-        const metaKey = row.props.keyName;
+        const metaKey = row._props.keyName;
         const fieldTemplate = Doc.IsDelegateField(templateDoc, metaKey) ? Doc.MakeDelegate(templateDoc) : Doc.MakeEmbedding(templateDoc);
         fieldTemplate.title = metaKey;
         fieldTemplate.layout_fitWidth = true;
@@ -278,8 +290,8 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         openItems.push({
             description: 'Default Perspective',
             event: () => {
-                this.props.addDocTab(this.props.Document, OpenWhere.close);
-                this.props.addDocTab(this.fieldDocToLayout, OpenWhere.addRight);
+                this._props.addDocTab(this._props.Document, OpenWhere.close);
+                this._props.addDocTab(this.fieldDocToLayout, OpenWhere.addRight);
             },
             icon: 'image',
         });