#2135 Fix clickOutside fuctions in Toolbar (part 2) (#2139)

Signed-off-by: CTomlyn <[email protected]>
elyra-ai · Sep 3, 2024 · a043eb4 · a043eb4
1 parent 421e90a
commit a043eb4
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-action-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-action-item.jsx
@@ -89,7 +89,7 @@ class ToolbarActionItem extends React.Component {
 
 	clickOutside(evt) {
 		if (this.isSubAreaDisplayed()) {
-			const selector = `.${this.generateActionName()}[instanceId='${this.props.instanceId}']`;
+			const selector = `.${this.generateActionName()}[instanceid='${this.props.instanceId}']`;
 			const isOver = evt.target.closest(selector);
 
 			if (!isOver && !this.props.actionObj.leaveSubAreaOpenOnClickOutside) {
@@ -232,7 +232,7 @@ class ToolbarActionItem extends React.Component {
 		const subArea = this.isSubAreaDisplayed() ? this.generateSubArea() : null;
 
 		return (
-			<div ref={this.divRef} className={itemClassName} instanceId={this.props.instanceId}
+			<div ref={this.divRef} className={itemClassName} instanceid={this.props.instanceId}
 				data-toolbar-action={actionObj.action} data-toolbar-item
 				onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onKeyDown={this.onKeyDown}
 			>

diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu-item.jsx
@@ -61,7 +61,7 @@ class ToolbarSubMenuItem extends React.Component {
 
 	clickOutside(evt) {
 		if (this.state.subAreaDisplayed) {
-			const selector = `.${this.generateActionName()}[instanceId='${this.props.instanceId}']`;
+			const selector = `.${this.generateActionName()}[instanceid='${this.props.instanceId}']`;
 			const isOver = evt.target.closest(selector);
 
 			if (!isOver && !this.props.actionObj.leaveSubAreaOpenOnClickOutside) {
@@ -167,7 +167,7 @@ class ToolbarSubMenuItem extends React.Component {
 		const subArea = this.state.subAreaDisplayed ? this.generateSubArea() : null;
 
 		return (
-			<div ref={this.divRef} className={itemClassName} instanceId={this.props.instanceId}
+			<div ref={this.divRef} className={itemClassName} instanceid={this.props.instanceId}
 				data-toolbar-action={actionObj.action}
 				onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onKeyDown={this.onKeyDown}
 			>