From a043eb41d250d4aac68e3852ce31faa5ab2a45b4 Mon Sep 17 00:00:00 2001
From: CTomlyn <tomlyn@us.ibm.com>
Date: Tue, 3 Sep 2024 16:41:18 -0700
Subject: [PATCH] #2135 Fix clickOutside fuctions in Toolbar (part 2) (#2139)

Signed-off-by: CTomlyn <tomlyn@us.ibm.com>
---
 .../common-canvas/src/toolbar/toolbar-action-item.jsx         | 4 ++--
 .../common-canvas/src/toolbar/toolbar-sub-menu-item.jsx       | 4 ++--
 2 files changed, 4 insertions(+), 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
index b4f44944ec..ebd94c017e 100644
--- 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
index 014ff84ec2..78ac56a5ed 100644
--- 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}
 			>