fix: react-table layout (#2293)

* fix: react-table layout move the dropdown menu component to table cells close #2292 * test: fix selector
cheminfo · Apr 12, 2023 · d40f76b · d40f76b
1 parent d861d18
commit d40f76b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 28 deletions.
diff --git a/src/component/elements/ReactTable/Elements/ReactTableRow.tsx b/src/component/elements/ReactTable/Elements/ReactTableRow.tsx
@@ -99,36 +99,38 @@ function ReactTableRow(props: ReactTableRowProps) {
       {...row.getRowProps()}
       {...highlight.onHover}
     >
-      <DropdownMenu
-        trigger="contextMenu"
-        options={contextMenu}
-        onSelect={(selected) => onContextMenuSelect?.(selected, row.original)}
-      >
-        {row.cells.map((cell) => {
-          const { style, padding } = cell.column;
+      {row.cells.map((cell) => {
+        const { style, padding } = cell.column;
 
-          if (cell.isRowSpanned) {
-            return null;
-          } else {
-            return (
-              <td
-                rowSpan={cell.rowSpan}
-                key={cell.key}
-                {...cell.getCellProps()}
-                onContextMenu={(e) => {
-                  e.preventDefault();
+        if (cell.isRowSpanned) {
+          return null;
+        } else {
+          return (
+            <td
+              rowSpan={cell.rowSpan}
+              key={cell.key}
+              {...cell.getCellProps()}
+              onContextMenu={(e) => {
+                e.preventDefault();
 
-                  return false;
-                }}
-                style={{ padding, ...style }}
-                onClick={clickHandler}
+                return false;
+              }}
+              style={{ padding, ...style }}
+              onClick={clickHandler}
+            >
+              <DropdownMenu
+                trigger="contextMenu"
+                options={contextMenu}
+                onSelect={(selected) =>
+                  onContextMenuSelect?.(selected, row.original)
+                }
               >
                 {cell.render('Cell')}
-              </td>
-            );
-          }
-        })}
-      </DropdownMenu>
+              </DropdownMenu>
+            </td>
+          );
+        }
+      })}
     </tr>
   );
 }

diff --git a/test-e2e/core/setting.test.ts b/test-e2e/core/setting.test.ts
@@ -23,7 +23,7 @@ test('should Change the visibility of the panels', async ({ page }) => {
 
     //change  the checkbox value to tru
     await nmrium.page
-      .locator(':text("Databases panel")  + td > div > input')
+      .locator('td:has-text("Databases panel")  + td input')
       .click();
 
     // save changes

diff --git a/test-e2e/panels/filters.test.ts b/test-e2e/panels/filters.test.ts
@@ -220,7 +220,7 @@ test('Exclusion zones', async ({ page }) => {
 
     //enable exclusion zone tool
     await nmrium.page
-      .locator(':text("Exclusion zones")  + td > div > input')
+      .locator('td:has-text("Exclusion zones")  + td input')
       .click();
 
     // save setting changes