From 2dad65ffd28603f49b4b627144a8bff7d5f0ba91 Mon Sep 17 00:00:00 2001 From: srikant Date: Wed, 15 May 2024 21:35:43 +0530 Subject: [PATCH] #1919 Scroll Alert into view in Common Properties when clicked on an Alert Link (#1920) --- .../components/editor-form/editor-form.jsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx index fda733a5a7..85872dd594 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx +++ b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx @@ -75,7 +75,7 @@ class EditorForm extends React.Component { this.visibleTearsheet = null; this.defaultOpenTab = props.activeTab; this.alertOpenTab = null; - + this.scrollToAlert = false; } @@ -89,6 +89,18 @@ class EditorForm extends React.Component { return true; } + componentDidUpdate(prevProps) { + // Scroll to the selected accordion even when clicked from Alerts tab + if (this.scrollToAlert || prevProps.activeTab !== this.props.activeTab) { + const activeTabId = this.props.activeTab; + const activeTabElement = document.getElementsByClassName(`${activeTabId}`); + if (activeTabId && activeTabElement.length > 0) { + activeTabElement[0].scrollIntoView({ behavior: "smooth" }); + } + this.scrollToAlert = false; + } + } + _getMessageCountForCategory(tab) { if (!this.props.showAlertsTab) { return null; @@ -138,6 +150,7 @@ class EditorForm extends React.Component { if (this.defaultOpenTab === this.alertOpenTab) { this.defaultOpenTab = null; } + this.scrollToAlert = true; this.props.setActiveTab(control.parentCategoryId); } @@ -205,7 +218,7 @@ class EditorForm extends React.Component { open={ this.defaultOpenTab === tab.group || this.alertOpenTab === tab.group } onHeadingClick={this._showCategoryPanel.bind(this, tab.group)} className={`${classNames("properties-category-content", - { "show": categoryOpen })}`} + { "show": categoryOpen }, tab.group)}`} > {panelItems} {additionalComponent}