From 59dc2d51940492e89d774555354243eb050ba5fe Mon Sep 17 00:00:00 2001
From: Carita <carita.ou@gmail.com>
Date: Wed, 3 Jan 2024 04:28:14 -0800
Subject: [PATCH] #1655 Readjust FlexibleTable height when number of rows
 changes (#1656)

Signed-off-by: Carita Ou <cou@us.ibm.com>
---
 .../components/flexibletable-test.js            | 15 +++++++++++++++
 .../flexible-table/flexible-table.jsx           | 17 +++++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/components/flexibletable-test.js b/canvas_modules/common-canvas/__tests__/common-properties/components/flexibletable-test.js
index 1339c7d0b6..edc3f223ee 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/components/flexibletable-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/components/flexibletable-test.js
@@ -376,4 +376,19 @@ describe("FlexibleTable renders correctly", () => {
 		expect(emptyTableDiv1).to.have.text(glmmParamDef.resources["covariance_list.placeholder.label"]);
 	});
 
+	it("should readjust height when row changes", () => {
+		const wrapper = mountWithIntl(
+			<FlexibleTable
+				columns={headers}
+				data={rows}
+				rows={5}
+			/>
+		);
+		const orgTableHeight = wrapper.find("FlexibleTable").state("tableHeight");
+		expect(orgTableHeight).to.equal(192);
+
+		wrapper.setProps({ rows: 2 });
+		const newTableHeight = wrapper.find("FlexibleTable").state("tableHeight");
+		expect(newTableHeight).to.equal(96);
+	});
 });
diff --git a/canvas_modules/common-canvas/src/common-properties/components/flexible-table/flexible-table.jsx b/canvas_modules/common-canvas/src/common-properties/components/flexible-table/flexible-table.jsx
index cd62db27bd..73d6f1fc51 100644
--- a/canvas_modules/common-canvas/src/common-properties/components/flexible-table/flexible-table.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/components/flexible-table/flexible-table.jsx
@@ -61,6 +61,7 @@ class FlexibleTable extends React.Component {
 		this.onSort = this.onSort.bind(this);
 		this.sortHeaderClick = this.sortHeaderClick.bind(this);
 		this._updateTableWidth = this._updateTableWidth.bind(this);
+		this._updateRows = this._updateRows.bind(this);
 		this._adjustTableHeight = this._adjustTableHeight.bind(this);
 		this.handleCheckedRow = this.handleCheckedRow.bind(this);
 		this.handleCheckedAllRows = this.handleCheckedAllRows.bind(this);
@@ -74,8 +75,11 @@ class FlexibleTable extends React.Component {
 	}
 
 	componentDidUpdate(prevProps, prevState) {
-		if (prevProps.rows !== this.props.rows ||
-			prevProps.columns !== this.props.columns ||
+		if (prevProps.rows !== this.props.rows) {
+			this._updateRows();
+		}
+
+		if (prevProps.columns !== this.props.columns ||
 			prevProps.noAutoSize !== this.props.noAutoSize) {
 			this._adjustTableHeight();
 		}
@@ -243,10 +247,19 @@ class FlexibleTable extends React.Component {
 		}
 	}
 
+	_updateRows() {
+		if (this.props.rows && this.props.rows !== this.state.rows) {
+			this.setState({ rows: this.props.rows }, () => {
+				this._adjustTableHeight();
+			});
+		}
+	}
+
 	_adjustTableHeight() {
 		if (this.props.noAutoSize) {
 			return;
 		}
+
 		let newHeight = this.state.tableHeight;
 		let dynamicH = this.state.dynamicHeight;
 		const multiSelectTableHeight = REM_ROW_HEIGHT + REM_HEADER_HEIGHT;