1 files changed, 30 insertions, 15 deletions

diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index 6b66d829c..5b03e2236 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -133,20 +133,29 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
         this._reactionDisposer?.();
     }
     isRowActive = () => this._expanded && this._props.editable;
-    finishEdit = action(() => (this._expanded = false));
+
+    finishEdit = action(() => {
+        if (this._expanded) {
+            this._expanded = false;
+            // if the edit finishes, then we want to lose focus on the textBox unless something else in the textBox got focus
+            // the timeout allows switching focus from one dashFieldView to another in the same text box
+            setTimeout(() => !this._props.tbox.ProseRef?.contains(document.activeElement) && this._props.tbox._props.onBlur?.());
+        }
+    });
     selectedCell = (): [Doc, number] => [this._dashDoc!, 0];
+    columnWidth = () => Math.min(this._props.tbox._props.PanelWidth(), Math.max(50, this._props.tbox._props.PanelWidth() - 100)); // try to leave room for the fieldKey
 
     // set the display of the field's value (checkbox for booleans, span of text for strings)
     @computed get fieldValueContent() {
         return !this._dashDoc ? null : (
-            <div onClick={action(e => (this._expanded = !this._props.editable ? !this._expanded : true))} style={{ fontSize: 'smaller', width: this._props.hideKey ? this._props.tbox._props.PanelWidth() - 20 : undefined }}>
+            <div onClick={action(e => (this._expanded = !this._props.editable ? !this._expanded : true))} style={{ fontSize: 'smaller', width: !this._hideKey && this._expanded ? this.columnWidth() : undefined }}>
                 <SchemaTableCell
                     Document={this._dashDoc}
                     col={0}
                     deselectCell={emptyFunction}
                     selectCell={emptyFunction}
                     maxWidth={this._props.hideKey || this._hideKey ? undefined : this._props.tbox._props.PanelWidth}
-                    columnWidth={returnZero}
+                    columnWidth={this._expanded ? this.columnWidth : returnZero}
                     selectedCell={this.selectedCell}
                     fieldKey={this._fieldKey}
                     rowHeight={returnZero}
@@ -159,6 +168,8 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
                     finishEdit={this.finishEdit}
                     transform={Transform.Identity}
                     menuTarget={null}
+                    autoFocus={true}
+                    rootSelected={this._props.tbox._props.rootSelected}
                 />
             </div>
         );
@@ -187,12 +198,12 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
     );
 
     @computed get _hideKey() {
-        return this._dashDoc && this._dashDoc[this._fieldKey + '_hideKey'];
+        return this._dashDoc?.[this._fieldKey + '_hideKey'] && !this._expanded;
     }
 
     // clicking on the label creates a pivot view collection of all documents
     // in the same collection.  The pivot field is the fieldKey of this label
-    onPointerDownLabelSpan = (e: any) => {
+    onPointerDownLabelSpan = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, returnFalse, returnFalse, e => {
             DashFieldViewMenu.createFieldView = this.createPivotForField;
             DashFieldViewMenu.toggleFieldHide = this.toggleFieldHide;
@@ -215,7 +226,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
     render() {
         return (
             <div
-                className="dashFieldView"
+                className={`dashFieldView${this.isRowActive() ? '-active' : ''}`}
                 ref={this._fieldRef}
                 style={{
                     width: this._props.width,
@@ -229,7 +240,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
                 )}
                 {this._props.fieldKey.startsWith('#') ? null : this.fieldValueContent}
                 {!this.values.length ? null : (
-                    <select onChange={this.selectVal} style={{ height: '10px', width: '15px', fontSize: '12px', background: 'transparent' }}>
+                    <select className="dashFieldView-select" onChange={this.selectVal}>
                         {this.values.map(val => (
                             <option value={val.value}>{val.label}</option>
                         ))}
@@ -272,14 +283,18 @@ export class DashFieldViewMenu extends AntimodeMenu<AntimodeMenuProps> {
     };
     render() {
         return this.getElement(
-            <Tooltip key="trash" title={<div className="dash-tooltip">{`Show Pivot Viewer for '${this._fieldKey}'`}</div>}>
-                <button className="antimodeMenu-button" onPointerDown={this.showFields}>
-                    <FontAwesomeIcon icon="eye" size="lg" />
-                </button>
-                <button className="antimodeMenu-button" onPointerDown={this.toggleFieldHide}>
-                    <FontAwesomeIcon icon="bullseye" size="lg" />
-                </button>
-            </Tooltip>
+            <>
+                <Tooltip key="trash" title={<div className="dash-tooltip">{`Show Pivot Viewer for '${this._fieldKey}'`}</div>}>
+                    <button className="antimodeMenu-button" onPointerDown={this.showFields}>
+                        <FontAwesomeIcon icon="eye" size="lg" />
+                    </button>
+                </Tooltip>
+                <Tooltip key="trash" title={<div className="dash-tooltip">Toggle view of field key</div>}>
+                    <button className="antimodeMenu-button" onPointerDown={this.toggleFieldHide}>
+                        <FontAwesomeIcon icon="bullseye" size="lg" />
+                    </button>
+                </Tooltip>
+            </>
         );
     }
 }