#2003 Open Link in Tooltip in Safari browser. (#2004)

elyra-ai · Jun 6, 2024 · 12380ae · 12380ae
1 parent 36755ee
commit 12380ae
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx
@@ -33,6 +33,8 @@ class ToolTip extends React.Component {
 		this.pendingTooltip = null;
 		this.hideTooltipOnScrollAndResize = this.hideTooltipOnScrollAndResize.bind(this);
 		this.tabKeyPressed = false;
+		// Tooltip should not close if link inside tooltip is clicked.
+		this.linkClicked = false;
 	}
 
 	componentDidMount() {
@@ -343,7 +345,7 @@ class ToolTip extends React.Component {
 	}
 
 	hideTooltipOnScrollAndResize(evt) {
-		if (this.state.isTooltipVisible) {
+		if (this.state.isTooltipVisible && !this.linkClicked) {
 			this.setTooltipVisible(false);
 		}
 	}
@@ -419,7 +421,7 @@ class ToolTip extends React.Component {
 		if (this.props.className) {
 			tipClass += " " + this.props.className;
 		}
-		let linkClicked = false;
+		this.linkClicked = false;
 		let link = null;
 		if (this.state.isTooltipVisible && this.props.tooltipLinkHandler && this.props.link) {
 			const linkInformation = this.props.tooltipLinkHandler(this.props.link);
@@ -443,16 +445,17 @@ class ToolTip extends React.Component {
 						}
 					}}
 					onBlur={() => {
-						if (linkClicked) { // Keep tooltip open when link is clicked
+						if (this.linkClicked) { // Keep tooltip open when link is clicked
 							this.setTooltipVisible(true);
 						} else { // Close the tooltip and shift focus to tooltip icon
 							this.triggerRef.focus();
+							this.linkClicked = false;
 							this.setTooltipVisible(false);
 						}
 					}
 					}
 					onClick={() => {
-						linkClicked = true;
+						this.linkClicked = true;
 					}}
 				>
 					<Link
@@ -462,6 +465,9 @@ class ToolTip extends React.Component {
 						target="_blank"
 						rel="noopener"
 						visited={false}
+						onMouseDown={(evt) => {
+							evt.preventDefault();
+						}}
 					>
 						{linkInformation.label}
 					</Link>