fix(AnalyticalTable): only apply selectedRowIds prop if its value has changed (#685)

Author: Lukas742

package.json

@@ -52,7 +52,7 @@
     "@rollup/plugin-replace": "^2.3.2",
     "@storybook/storybook-deployer": "^2.8.6",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.0-beta.1",
+    "@testing-library/react": "^11.0.2",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^26.0.8",
     "@types/react": "^16.9.34",

packages/main/src/components/AnalyticalTable/index.tsx

@@ -102,7 +102,7 @@ export interface TableProps extends CommonProps {
    *
    * - **Default**: Every column without fixed width gets the maximum available space of the table.
    * - **Smart**: Every column gets the space it needs for displaying the full header text. If all headers need more space than the available table width, horizontal scrolling will be enabled. If there is space left, columns with a long content will get more space until there is no more table space left.
-   * - **Grow**: Every column gets the space it needs for displaying it's full header text and full content of all cells. If it requires more space than the table has, horizontal scrolling will be enabled.
+   * - **Grow**: Every column gets the space it needs for displaying its full header text and full content of all cells. If it requires more space than the table has, horizontal scrolling will be enabled.
    *
    */
   scaleWidthMode?: TableScaleWidthMode;
@@ -290,17 +290,8 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
   }, [groupBy, setGroupBy]);
 
   useEffect(() => {
-    toggleAllRowsSelected(false);
-    const validChars = /^\d+(\.\d+)*$/;
-    // eslint-disable-next-line guard-for-in
-    for (const row in selectedRowIds) {
-      if (reactTableOptions?.getRowId) {
-        toggleRowSelected(row, selectedRowIds[row]);
-      } else if (validChars.test(row)) {
-        toggleRowSelected(row, selectedRowIds[row]);
-      }
-    }
-  }, [toggleRowSelected, toggleAllRowsSelected, selectedRowIds, reactTableOptions?.getRowId]);
+    dispatch({ type: 'SET_SELECTED_ROW_IDS', payload: { selectedRowIds } });
+  }, [selectedRowIds]);
 
   const calcRowHeight = parseInt(
     getComputedStyle(tableRef.current ?? document.body).getPropertyValue('--sapWcrAnalyticalTableRowHeight') || '44'

packages/main/src/components/AnalyticalTable/tableReducer/stateReducer.ts

@@ -5,6 +5,8 @@ export const stateReducer = (newState, action) => {
       return { ...newState, tableClientWidth: payload.tableClientWidth };
     case 'TABLE_SCROLLING_ENABLED':
       return { ...newState, isScrollable: payload.isScrollable };
+    case 'SET_SELECTED_ROW_IDS':
+      return { ...newState, selectedRowIds: payload.selectedRowIds };
     default:
       return newState;
   }

yarn.lock

@@ -2076,7 +2076,7 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/[email protected]", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/[email protected]", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.0.tgz#f10245877042a815e07f7e693faff0ae9d3a2aac"
   integrity sha512-qArkXsjJq7H+T86WrIFV0Fnu/tNOkZ4cgXmjkzAu3b/58D5mFIO8JH/y77t7C9q0OdDRdh9s7Ue5GasYssxtXw==
@@ -4390,14 +4390,16 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@testing-library/dom@^7.22.3":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.23.0.tgz#c54c0fa53705ad867bcefb52fc0c96487fbc10f6"
-  integrity sha512-H5m090auYH+obdZmsaYLrSWC5OauWD2CvNbz88KBxQJoXgkJzbU0DpAG8BS7Evj5WqCC3nAAKrLS6vw0ljUYLg==
+"@testing-library/dom@^7.24.2":
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.24.2.tgz#6d2b7dd21efbd5358b98c2777fc47c252f3ae55e"
+  integrity sha512-ERxcZSoHx0EcN4HfshySEWmEf5Kkmgi+J7O79yCJ3xggzVlBJ2w/QjJUC+EBkJJ2OeSw48i3IoePN4w8JlVUIA==
   dependencies:
+    "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.10.3"
     "@types/aria-query" "^4.2.0"
     aria-query "^4.2.2"
+    chalk "^4.1.0"
     dom-accessibility-api "^0.5.1"
     pretty-format "^26.4.2"
 
@@ -4415,13 +4417,13 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react@^11.0.0-beta.1":
-  version "11.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.0.0-beta.1.tgz#14b4a418f8e9a1fb48ca7ac5d69b4a017a4bab54"
-  integrity sha512-tbuEjYCQiYGIYw7IG2V5uCwo+E5rpZXd5bEHH+FcLVncMvCOenWC5mMwhgt1YPaLJyBtYeQ1MoDNvpMFKm1rpQ==
+"@testing-library/react@^11.0.2":
+  version "11.0.4"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.0.4.tgz#c84082bfe1593d8fcd475d46baee024452f31dee"
+  integrity sha512-U0fZO2zxm7M0CB5h1+lh31lbAwMSmDMEMGpMT3BUPJwIjDEKYWOV4dx7lb3x2Ue0Pyt77gmz/VropuJnSz/Iew==
   dependencies:
-    "@babel/runtime" "^7.10.3"
-    "@testing-library/dom" "^7.22.3"
+    "@babel/runtime" "^7.11.2"
+    "@testing-library/dom" "^7.24.2"
 
 "@types/anymatch@*":
   version "1.3.1"
@@ -7064,7 +7066,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0:
+chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
   integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==