Merge pull request #14160 from ToolJet/fix-hotfix-table-cell-edit

[hotfix]: Fix on clicking on cell edit not selecting the row

Author: johnsoncherian

.version

@@ -1 +1 @@
-3.20.2-lts
+3.20.3-lts

frontend/.version

@@ -1 +1 @@
-3.20.2-lts
+3.20.3-lts

frontend/ee

@@ -692,6 +692,7 @@ export const tableConfig = {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       dynamicHeight: { value: `{{false}}` },
+      selectRowOnCellEdit: { value: '{{false}}' },
     },
     events: [],
     styles: {

frontend/src/AppBuilder/WidgetManager/widgets/table.js

@@ -279,8 +279,7 @@ export const DatepickerColumn = ({
   const _showOverlay =
     ref?.current &&
     textRef?.current &&
-    (ref.current.clientWidth < textRef.current.offsetWidth ||
-      ref.current.clientHeight < textRef.current.offsetHeight);
+    (ref.current.clientWidth < textRef.current.offsetWidth || ref.current.clientHeight < textRef.current.offsetHeight);
 
   return (
     <OverlayTrigger
@@ -317,9 +316,10 @@ export const DatepickerColumn = ({
             'theme-dark dark-theme': darkMode,
           })}
           selected={date}
-          onChange={(date) => {
+          onChange={(date, e) => {
             setIsInputFocused(false);
             handleDateChange(date);
+            e.stopPropagation();
           }}
           value={isInputFocused ? inputValue : computeDateString(date)}
           dateFormat={!isDateSelectionEnabled && isTimeChecked ? 'HH:mm' : dateDisplayFormat}

frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Datepicker.jsx

@@ -109,15 +109,11 @@ export const TableRow = ({
                 return;
               }
 
-              if (
-                isEditable ||
-                (['rightActions', 'leftActions'].includes(cell.column.id) &&
-                  allowSelection &&
-                  (!selectRowOnCellEdit || row.getIsSelected()))
-              ) {
-                // to avoid on click event getting propagating to row when td is editable or has action button and allowSelection is true and selectRowOnCellEdit is false
+              if (isEditable && allowSelection && !selectRowOnCellEdit) {
                 e.stopPropagation();
+                fireEvent('onRowClicked');
               }
+
               setExposedVariables({
                 selectedCell: {
                   columnName: cell.column.columnDef?.header,

frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/_components/TableRow.jsx

@@ -65,7 +65,7 @@ export const createInitSlice = (set, get) => ({
             ? true
             : false;
         state.components[id].properties.defaultSelectedRow = properties?.defaultSelectedRow ?? { id: 1 };
-        state.components[id].properties.selectRowOnCellEdit = properties?.selectRowOnCellEdit ?? true;
+        state.components[id].properties.selectRowOnCellEdit = properties?.selectRowOnCellEdit ?? false;
 
         let serverSidePagination = properties.serverSidePagination ?? false;
         if (typeof serverSidePagination !== 'boolean') state.components[id].properties.serverSidePagination = false;

frontend/src/AppBuilder/Widgets/NewTable/_stores/slices/initSlice.js

@@ -1 +1 @@
-3.20.2-lts
+3.20.3-lts

server/.version

@@ -691,6 +691,7 @@ export const tableConfig = {
       visibility: { value: '{{true}}' },
       disabledState: { value: '{{false}}' },
       dynamicHeight: { value: `{{false}}` },
+      selectRowOnCellEdit: { value: '{{false}}' },
     },
     events: [],
     styles: {