when clicking outside of the terminal, if search popover it's opened,…

… automatically close it
cisco-open · Oct 24, 2024 · 3d911c3 · 3d911c3
1 parent 38585ae
commit 3d911c3
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/...l/components/ms-terminal-xterm-with-toolbar/ms-terminal-xterm-with-toolbar.component.html b/...l/components/ms-terminal-xterm-with-toolbar/ms-terminal-xterm-with-toolbar.component.html
@@ -14,11 +14,12 @@
 
   SPDX-License-Identifier: Apache-2.0 -->
 
-<div class="ms-terminal-wrapper">
+<div class="ms-terminal-wrapper" #terminalWrapper>
 	<div class="top-terminal-section">
 		<div class="heading-section-title mb-1 flex items-center">Terminal</div>
 		<div>
 			<ms-terminal-toolbar
+				popoverId="terminal-popover"
 				(clearTerminal)="terminal.clearTerminal()"
 				(scrollToTopTerminal)="terminal.scrollToTop()"
 				(scrollToBottomTerminal)="terminal.scrollToBottom()"

diff --git a/...nal/components/ms-terminal-xterm-with-toolbar/ms-terminal-xterm-with-toolbar.component.ts b/...nal/components/ms-terminal-xterm-with-toolbar/ms-terminal-xterm-with-toolbar.component.ts
@@ -14,8 +14,9 @@
 //
 //   SPDX-License-Identifier: Apache-2.0
 
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, OnDestroy, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
+import { PopoverManagerService } from '../../../../../core/components/ms-popover/service/popover-manager.service';
 import { MsTerminalToolbarComponent } from '../ms-terminal-toolbar/ms-terminal-toolbar.component';
 import { MsTerminalXtermComponent } from '../ms-terminal-xterm/ms-terminal-xterm.component';
 
@@ -28,4 +29,33 @@ import { MsTerminalXtermComponent } from '../ms-terminal-xterm/ms-terminal-xterm
 	standalone: true,
 	imports: [MsTerminalToolbarComponent, MsTerminalXtermComponent]
 })
-export class MsTerminalXtermWithToolbarComponent {}
+export class MsTerminalXtermWithToolbarComponent implements OnDestroy {
+	@ViewChild('terminalWrapper') terminalWrapper!: ElementRef;
+
+	private clickListener!: () => void;
+
+	constructor(
+		private renderer: Renderer2,
+		private popoverManager: PopoverManagerService
+	) {}
+
+	ngOnInit() {
+		this.clickListener = this.renderer.listen('document', 'click', (event: Event) => {
+			this.handleClickOutside(event);
+		});
+	}
+
+	handleClickOutside(event: Event): void {
+		if (this.terminalWrapper && !this.terminalWrapper.nativeElement.contains(event.target)) {
+			if (this.popoverManager.hasActivePopover('terminal-popover')) {
+				this.popoverManager.closePopoverById('terminal-popover');
+			}
+		}
+	}
+
+	ngOnDestroy() {
+		if (this.clickListener) {
+			this.clickListener();
+		}
+	}
+}