Merge branch 'master' into sophie-report-manager

1 files changed, 14 insertions, 9 deletions

diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index ebb4ba5a1..3598d548a 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -22,9 +22,6 @@ import { EditableView } from '../EditableView';
 import './CollectionStackingView.scss';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { Id } from '../../../fields/FieldSymbols';
-const higflyout = require('@hig/flyout');
-export const { anchorPoints } = higflyout;
-export const Flyout = higflyout.default;
 
 // So this is how we are storing a column
 interface CSVFieldColumnProps {
@@ -215,15 +212,16 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
         const layoutItems: ContextMenuProps[] = [];
         const docItems: ContextMenuProps[] = [];
         const dataDoc = this.props.DataDoc || this.props.Document;
-
+        const width = this._ele ? Number(getComputedStyle(this._ele).width.replace('px', '')) : 0;
+        const height = this._ele ? Number(getComputedStyle(this._ele).height.replace('px', '')) : 0;
         DocUtils.addDocumentCreatorMenuItems(
             doc => {
                 FormattedTextBox.SelectOnLoad = doc[Id];
                 return this.props.addDocument?.(doc);
             },
             this.props.addDocument,
-            x,
-            y,
+            0,
+            0,
             true
         );
 
@@ -275,8 +273,11 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                 this.props.addDocument?.(created);
             }
         });
-        const pt = this.props.screenToLocalTransform().inverse().transformPoint(x, y);
-        ContextMenu.Instance.displayMenu(x, y, undefined, true);
+        const pt = this.props
+            .screenToLocalTransform()
+            .inverse()
+            .transformPoint(width - 30, height);
+        ContextMenu.Instance.displayMenu(pt[0], pt[1], undefined, true);
     };
 
     @computed get innards() {
@@ -360,7 +361,11 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                             //TODO: would be great if there was additional space beyond the frame, so that you can actually see your
                             // bottom note
                             //TODO: ok, so we are using a single column, and this is it!
-                            <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton" style={{ width: 'calc(100% - 25px)', maxWidth: this.props.columnWidth / this.props.numGroupColumns - 25, marginBottom: 10 }}>
+                            <div
+                                key={`${heading}-add-document`}
+                                onKeyDown={e => e.stopPropagation()}
+                                className="collectionStackingView-addDocumentButton"
+                                style={{ width: 'calc(100% - 25px)', maxWidth: this.props.columnWidth / this.props.numGroupColumns - 25, marginBottom: 10 }}>
                                 <EditableView
                                     GetValue={returnEmptyString}
                                     SetValue={this.addNewTextDoc}