Merge pull request #637 from icflorescu/next

Fix #625
icflorescu · Sep 4, 2024 · 098d257 · 098d257
2 parents c4d7f69 + 835108e
commit 098d257
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 75 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,10 @@
 The following is a list of notable changes to the Mantine DataTable component.  
 Minor versions that are not listed in the changelog are bug fixes and small improvements.
 
+## 7.12.3 (2024-09-04)
+
+- Fix [#625](https://github.com/icflorescu/mantine-datatable/issues/625) - after implementing row dragging support, inputs inside columns were losing focus
+
 ## 7.12.2 (2024-09-04)
 
 - Update dev dependencies to ensure compatibility with Mantine 7.12.2

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.12.2",
+  "version": "7.12.3",
   "description": "The lightweight, dependency-free, dark-theme aware table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row expansion, nesting, context menus, and much more",
   "keywords": [
     "mantine",

diff --git a/package/DataTableRow.tsx b/package/DataTableRow.tsx
@@ -82,78 +82,76 @@ export function DataTableRow<T>({
   selectionColumnStyle,
   rowFactory,
 }: Readonly<DataTableRowProps<T>>) {
-  function TableCols() {
-    return (
-      <>
-        {selectionVisible && (
-          <DataTableRowSelectorCell<T>
-            className={selectionColumnClassName}
-            style={selectionColumnStyle}
-            record={record}
-            index={index}
-            trigger={selectionTrigger}
-            withRightShadow={selectorCellShadowVisible}
-            checked={selectionChecked}
-            disabled={!onSelectionChange || (isRecordSelectable ? !isRecordSelectable(record, index) : false)}
-            onChange={onSelectionChange}
-            checkboxProps={selectionCheckboxProps}
-            getCheckboxProps={getSelectionCheckboxProps}
-          />
-        )}
+  const cols = (
+    <>
+      {selectionVisible && (
+        <DataTableRowSelectorCell<T>
+          className={selectionColumnClassName}
+          style={selectionColumnStyle}
+          record={record}
+          index={index}
+          trigger={selectionTrigger}
+          withRightShadow={selectorCellShadowVisible}
+          checked={selectionChecked}
+          disabled={!onSelectionChange || (isRecordSelectable ? !isRecordSelectable(record, index) : false)}
+          onChange={onSelectionChange}
+          checkboxProps={selectionCheckboxProps}
+          getCheckboxProps={getSelectionCheckboxProps}
+        />
+      )}
 
-        {columns.map(({ hidden, hiddenContent, ...columnProps }, columnIndex) => {
-          if (hidden || hiddenContent) return null;
+      {columns.map(({ hidden, hiddenContent, ...columnProps }, columnIndex) => {
+        if (hidden || hiddenContent) return null;
 
-          const {
-            accessor,
-            visibleMediaQuery,
-            textAlign,
-            noWrap,
-            ellipsis,
-            width,
-            render,
-            cellsClassName,
-            cellsStyle,
-            customCellAttributes,
-          } = { ...defaultColumnProps, ...columnProps };
+        const {
+          accessor,
+          visibleMediaQuery,
+          textAlign,
+          noWrap,
+          ellipsis,
+          width,
+          render,
+          cellsClassName,
+          cellsStyle,
+          customCellAttributes,
+        } = { ...defaultColumnProps, ...columnProps };
 
-          return (
-            <DataTableRowCell<T>
-              key={accessor as React.Key}
-              className={typeof cellsClassName === 'function' ? cellsClassName(record, index) : cellsClassName}
-              style={cellsStyle?.(record, index)}
-              visibleMediaQuery={visibleMediaQuery}
-              record={record}
-              index={index}
-              onClick={
-                onCellClick
-                  ? (event) => onCellClick({ event, record, index, column: columnProps, columnIndex })
-                  : undefined
-              }
-              onDoubleClick={
-                onCellDoubleClick
-                  ? (event) => onCellDoubleClick({ event, record, index, column: columnProps, columnIndex })
-                  : undefined
-              }
-              onContextMenu={
-                onCellContextMenu
-                  ? (event) => onCellContextMenu({ event, record, index, column: columnProps, columnIndex })
-                  : undefined
-              }
-              accessor={accessor}
-              textAlign={textAlign}
-              noWrap={noWrap}
-              ellipsis={ellipsis}
-              width={width}
-              render={render}
-              defaultRender={defaultColumnRender}
-              customCellAttributes={customCellAttributes}
-            />
-          );
-        })}
-      </>
-    );
-  }
+        return (
+          <DataTableRowCell<T>
+            key={accessor as React.Key}
+            className={typeof cellsClassName === 'function' ? cellsClassName(record, index) : cellsClassName}
+            style={cellsStyle?.(record, index)}
+            visibleMediaQuery={visibleMediaQuery}
+            record={record}
+            index={index}
+            onClick={
+              onCellClick
+                ? (event) => onCellClick({ event, record, index, column: columnProps, columnIndex })
+                : undefined
+            }
+            onDoubleClick={
+              onCellDoubleClick
+                ? (event) => onCellDoubleClick({ event, record, index, column: columnProps, columnIndex })
+                : undefined
+            }
+            onContextMenu={
+              onCellContextMenu
+                ? (event) => onCellContextMenu({ event, record, index, column: columnProps, columnIndex })
+                : undefined
+            }
+            accessor={accessor}
+            textAlign={textAlign}
+            noWrap={noWrap}
+            ellipsis={ellipsis}
+            width={width}
+            render={render}
+            defaultRender={defaultColumnRender}
+            customCellAttributes={customCellAttributes}
+          />
+        );
+      })}
+    </>
+  );
 
   const expandedElement = expansion && (
     <DataTableRowExpansion
@@ -184,17 +182,14 @@ export function DataTableRow<T>({
       record,
       index,
       rowProps,
-      children: <TableCols />,
+      children: cols,
       expandedElement,
     });
   }
 
   return (
     <>
-      <TableTr {...rowProps}>
-        <TableCols />
-      </TableTr>
-
+      <TableTr {...rowProps}>{cols}</TableTr>
       {expandedElement}
     </>
   );