Close menu after making selection. Fix menu display.

concord-consortium · Oct 24, 2024 · d518077 · d518077
1 parent 0bdfeb8
commit d518077
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/nested-table-view/common/draggable-table-tags.tsx b/src/components/nested-table-view/common/draggable-table-tags.tsx
@@ -95,10 +95,12 @@ export const DraggableTableHeader: React.FC<PropsWithChildren<DraggableTableHead
 
     const handleSortAttribute = (isDescending = false) => {
       sortAttribute(dataSetName, attrTitle, isDescending);
+      setShowHeaderMenu(false);
     };
 
     const handleDisplayFormulaEditor = () => {
       displayFormulaEditor(dataSetName, attrTitle);
+      setShowHeaderMenu(false);
     };
 
     // Manage synthetic drag in Codap via API requests
@@ -221,8 +223,8 @@ export const DraggableTableHeader: React.FC<PropsWithChildren<DraggableTableHead
         { showHeaderMenu && tableContainer && headerPos &&
             createPortal(
               <div className={css.headerMenu} ref={headerMenuRef}
-                    style={{left: headerPos?.left + 5, top: headerPos?.bottom  + scrollY}}>
-                <button onClick={handleDisplayFormulaEditor}>Edit Formula</button>
+                    style={{left: headerPos?.left + 5 + scrollX, top: headerPos?.bottom  + scrollY}}>
+                <button onClick={handleDisplayFormulaEditor}>Edit Formula...</button>
                 <button onClick={() => handleSortAttribute()}>Sort Ascending (A➞Z, 0➞9)</button>
                 <button onClick={() => handleSortAttribute(true)}>Sort Descending (Z➞A, 9➞0)</button>
               </div>,

diff --git a/src/components/nested-table-view/common/tables.scss b/src/components/nested-table-view/common/tables.scss
@@ -294,7 +294,9 @@ table.draggableTableContainer {
     background-color: transparent;
     border: none;
     cursor: pointer;
+    text-align: left;
     white-space: nowrap;
+    width: 100%;
 
     &:hover {
       color: #666;