#2135 Fix clickOutside fuctions in Toolbar (#2136)

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

Hide file tree

Showing 4 changed files with 11 additions and 13 deletions.
diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-context-toolbar.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-context-toolbar.jsx
@@ -118,7 +118,7 @@ class CommonCanvasContextToolbar extends React.Component {
 		// If we have some overflow menu items, we reduce the width by five pixels
 		// which forces the overflow menu and the overflow icon to be shown. We
 		// use 5 pixels because this is how many are needed to make the toolbar
-		// work correcty with differnet browser magnificaitons.
+		// work correcty with different browser magnifications.
 		const reduction = overflowMenuItems.length > 0 ? 5 : 0;
 		return buttonsWidth + dividersWidth - reduction;
 	}

diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-toolbar.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-toolbar.jsx
@@ -204,8 +204,8 @@ class CommonCanvasToolbar extends React.Component {
 		return rightBar;
 	}
 
-	// Returns a string to be displayed over the top of the default notificaiton
-	// icon. The string shows the number of notificaiton messages up to a maximum
+	// Returns a string to be displayed over the top of the default notification
+	// icon. The string shows the number of notification messages up to a maximum
 	// of nine. If the application provides its own icon in notificationConfigIcon,
 	// the 'text content' is not displayed so null is returned.
 	generateTextContent() {

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,10 +89,8 @@ class ToolbarActionItem extends React.Component {
 
 	clickOutside(evt) {
 		if (this.isSubAreaDisplayed()) {
-			const toolbarSelector = `.toolbar-div[instanceid='${this.props.instanceId}']`;
-			const toolbarElement = document.querySelector(toolbarSelector);
-			const items = toolbarElement.getElementsByClassName(this.generateActionName());
-			const isOver = items && items.length > 0 ? items[0].contains(evt.target) : false;
+			const selector = `.${this.generateActionName()}[instanceId='${this.props.instanceId}']`;
+			const isOver = evt.target.closest(selector);
 
 			if (!isOver && !this.props.actionObj.leaveSubAreaOpenOnClickOutside) {
 				this.closeSubArea();
@@ -234,7 +232,8 @@ class ToolbarActionItem extends React.Component {
 		const subArea = this.isSubAreaDisplayed() ? this.generateSubArea() : null;
 
 		return (
-			<div ref={this.divRef} className={itemClassName} data-toolbar-action={actionObj.action} data-toolbar-item
+			<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}
 			>
 				<div className="toolbar-button-item">

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,10 +61,8 @@ class ToolbarSubMenuItem extends React.Component {
 
 	clickOutside(evt) {
 		if (this.state.subAreaDisplayed) {
-			const toolbarSelector = `.toolbar-div[instanceid='${this.props.instanceId}']`;
-			const toolbarElement = document.querySelector(toolbarSelector);
-			const items = toolbarElement.getElementsByClassName(this.generateActionName());
-			const isOver = items?.length > 0 ? items[0].contains(evt.target) : false;
+			const selector = `.${this.generateActionName()}[instanceId='${this.props.instanceId}']`;
+			const isOver = evt.target.closest(selector);
 
 			if (!isOver && !this.props.actionObj.leaveSubAreaOpenOnClickOutside) {
 				this.closeSubArea();
@@ -169,7 +167,8 @@ class ToolbarSubMenuItem extends React.Component {
 		const subArea = this.state.subAreaDisplayed ? this.generateSubArea() : null;
 
 		return (
-			<div ref={this.divRef} className={itemClassName} data-toolbar-action={actionObj.action}
+			<div ref={this.divRef} className={itemClassName} instanceId={this.props.instanceId}
+				data-toolbar-action={actionObj.action}
 				onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onKeyDown={this.onKeyDown}
 			>
 				<div>