Merge pull request #3172 from Akshat55/issue.3170

fix: prevent definition tooltip from flickering on first interaction

Author: zvonimirfras

package-lock.json

@@ -86,7 +86,7 @@
     "@angular/platform-browser-dynamic": "14.3.0",
     "@angular/router": "14.3.0",
     "@babel/core": "7.9.6",
-    "@carbon/styles": "1.70.0",
+    "@carbon/styles": "1.88.0",
     "@carbon/themes": "11.24.0",
     "@commitlint/cli": "17.0.3",
     "@commitlint/config-conventional": "17.0.3",

package.json

@@ -45,17 +45,17 @@ describe("Definition tooltip", () => {
 
 	it("should open/close tooltip definition popover on button click", () => {
 		spyOn(tooltipEl.componentInstance.isOpenChange, "emit");
-		buttonEl.triggerEventHandler("click", new Event("click"));
+		buttonEl.triggerEventHandler("mousedown", new MouseEvent("mousedown", { button: 0 }));
 		fixture.detectChanges();
 		expect(tooltipEl.componentInstance.isOpenChange.emit).toHaveBeenCalled();
-		buttonEl.triggerEventHandler("click", new Event("click"));
+		buttonEl.triggerEventHandler("mousedown", new MouseEvent("mousedown", { button: 0 }));
 		fixture.detectChanges();
 		expect(tooltipEl.componentInstance.isOpenChange.emit).toHaveBeenCalled();
 	});
 
 	it("should markForCheck given the changeDetectorRef is set", () => {
 		const spy = spyOn(tooltipEl.componentInstance.changeDetectorRef, "markForCheck");
-		buttonEl.triggerEventHandler("click", new Event("click"));
+		buttonEl.triggerEventHandler("mousedown", new MouseEvent("mousedown", { button: 0 }));
 		fixture.detectChanges();
 		expect(spy).toHaveBeenCalled();
 	});

src/tooltip/definition-tooltip.component.spec.ts

@@ -30,7 +30,7 @@ import { PopoverContainer } from "carbon-components-angular/popover";
 			[attr.aria-expanded]="isOpen"
 			[attr.aria-describedby]="isOpen ? id : null"
 			(blur)="onBlur($event)"
-			(click)="onClick($event)"
+			(mousedown)="onClick($event)"
 			type="button">
 			<ng-content></ng-content>
 		</button>
@@ -39,7 +39,9 @@ import { PopoverContainer } from "carbon-components-angular/popover";
 			class="cds--popover"
 			[id]="id"
 			[attr.aria-hidden]="!isOpen"
-			role="tooltip">
+			role="tooltip"
+			(mousedown)="onPopoverMouseDown()"
+			(mouseup)="onPopoverMouseUp()">
 			<span class="cds--popover-content cds--definition-tooltip" aria-live="polite">
 				<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>
 				<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description" [ngTemplateOutletContext]="{ $implicit: templateContext }"></ng-template>
@@ -65,6 +67,11 @@ export class TooltipDefinition extends PopoverContainer {
 
 	@Input() openOnHover = false;
 
+	/**
+	 * Helper variable to ensure button blur doesn't fire on `click` of popover content
+	 */
+	private isInteractingWithPopover = false;
+
 	constructor(
 		protected elementRef: ElementRef,
 		protected ngZone: NgZone,
@@ -77,11 +84,24 @@ export class TooltipDefinition extends PopoverContainer {
 	}
 
 	onBlur(event: Event) {
-		this.handleChange(false, event);
+		// Only close if user is not interacting with popover content
+		if (!this.isInteractingWithPopover) {
+			this.handleChange(false, event);
+		}
+	}
+
+	onClick(event: MouseEvent) {
+		if (event.button === 0) {
+			this.handleChange(!this.isOpen, event);
+		}
+	}
+
+	onPopoverMouseDown() {
+		this.isInteractingWithPopover = true;
 	}
 
-	onClick(event: Event) {
-		this.handleChange(!this.isOpen, event);
+	onPopoverMouseUp() {
+		this.isInteractingWithPopover = false;
 	}
 
 	@HostListener("keyup", ["$event"])

src/tooltip/definition-tooptip.component.ts

@@ -23,7 +23,8 @@ export default {
 		caret: true,
 		description: "Uniform Resource Locator; the address of a resource (such as a document or website) on the Internet.",
 		align: "bottom",
-		autoAlign: false
+		autoAlign: false,
+		openOnHover: true
 	},
 	argTypes: {
 		autoAlign: {