Merge pull request #2676 from Akshat55/toggletip-performance

fix: Add event to document only when popover is open

Author: zvonimirfras

src/toggletip/toggletip.component.ts

@@ -31,6 +31,8 @@ export class Toggletip extends PopoverContainer implements AfterViewInit {
 
 	@ContentChild(ToggletipButton, { read: ElementRef }) btn!: ElementRef;
 
+	documentClick = this.handleFocusOut.bind(this);
+
 	constructor(private hostElement: ElementRef, private renderer: Renderer2) {
 		super();
 		this.highContrast = true;
@@ -40,7 +42,22 @@ export class Toggletip extends PopoverContainer implements AfterViewInit {
 	ngAfterViewInit(): void {
 		// Listen for click events on trigger
 		fromEvent(this.btn.nativeElement, "click")
-			.subscribe((event: Event) => this.handleExpansion(!this.isOpen, event));
+			.subscribe((event: Event) => {
+				// Add/Remove event listener based on isOpen to improve performance when there
+				// are a lot of toggletips
+				if (this.isOpen) {
+					document.removeEventListener("click", this.documentClick);
+				} else {
+					document.addEventListener("click", this.documentClick);
+				}
+
+				this.handleExpansion(!this.isOpen, event);
+			});
+
+		// Toggletip is open on initial render, add 'click' event listener to document so users can close
+		if (this.isOpen) {
+			document.addEventListener("click", this.documentClick);
+		}
 
 		if (this.btn) {
 			this.renderer.setAttribute(this.btn.nativeElement, "aria-controls", this.id);
@@ -55,7 +72,6 @@ export class Toggletip extends PopoverContainer implements AfterViewInit {
 		}
 	}
 
-	@HostListener("document:click", ["$event"])
 	handleFocusOut(event) {
 		if (!this.hostElement.nativeElement.contains(event.target)) {
 			this.handleExpansion(false, event);

src/toggletip/toggletip.stories.ts

@@ -80,7 +80,8 @@ const Template: Story<Toggletip> = (args) => ({
 });
 export const Basic = Template.bind({});
 Basic.args = {
-	isOpen: true
+	isOpen: true,
+	align: "bottom"
 };
 Basic.argTypes = {
 	onOpen: {
@@ -99,7 +100,6 @@ Basic.argTypes = {
 			"left",
 			"right"
 		],
-		defaultValue: "bottom",
 		control: "select"
 	}
 };