MARP-1738 fix overlay index of version & artifact dropdown (#270)

axonivy-market · Jan 2, 2025 · 29fb475 · 29fb475
1 parent c6f5e64
commit 29fb475
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 25 deletions.
diff --git a/...product-detail/product-detail-version-action/product-detail-version-action.component.html b/...product-detail/product-detail-version-action/product-detail-version-action.component.html
@@ -47,6 +47,7 @@
 
       @if (isDropDownDisplayed()) {
         <div #artifactDownloadDialog id="download-dropdown-menu" class="show maven-artifact-version__action border__dropdown">
+          <div class="up-arrow border__dropdown position-absolute"></div>
           <form>
             <div class="form-group">
               <label for="artifacts-selector" [lang]="languageService.selectedLanguage()"

diff --git a/...product-detail/product-detail-version-action/product-detail-version-action.component.scss b/...product-detail/product-detail-version-action/product-detail-version-action.component.scss
@@ -131,7 +131,7 @@
   height: 204px;
   margin-top: 6.4rem;
   background-color: var(--bs-body-bg);
-  z-index: 999;
+  z-index: 1000;
   padding: 10px;
   border-radius: 5px;
   box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);

diff --git a/...duct-detail/product-detail-version-action/product-detail-version-action.component.spec.ts b/...duct-detail/product-detail-version-action/product-detail-version-action.component.spec.ts
@@ -339,4 +339,16 @@ describe('ProductDetailVersionActionComponent', () => {
     const result = component.getTrackingEnvironmentBasedOnActionType();
     expect(result).toBe('');
   });
+
+  it('should close the dropdown when clicking outside', () => {
+    component.isDropDownDisplayed.set(true);
+    component.actionType = ProductDetailActionType.STANDARD;
+    fixture.detectChanges();
+
+    const event = new MouseEvent('click');
+    document.dispatchEvent(event);
+    fixture.detectChanges();
+
+    expect(component.isDropDownDisplayed()).toBeFalse();
+  });
 });
diff --git a/...t/product-detail/product-detail-version-action/product-detail-version-action.component.ts b/...t/product-detail/product-detail-version-action/product-detail-version-action.component.ts
@@ -5,6 +5,7 @@ import {
   computed,
   ElementRef,
   EventEmitter,
+  HostListener,
   inject,
   Input,
   model,
@@ -279,4 +280,18 @@ export class ProductDetailVersionActionComponent implements AfterViewInit {
         return '';
     }
   }
+
+  @HostListener('document:click', ['$event'])
+    handleClickOutside(event: MouseEvent): void {
+      const downloadDialog = this.elementRef.nativeElement.querySelector(
+        '#download-dropdown-menu'
+      );
+      if (
+        this.isDropDownDisplayed() &&
+        downloadDialog &&
+        !downloadDialog.contains(event.target)
+      ) {
+        this.isDropDownDisplayed.set(!this.isDropDownDisplayed());
+      }
+    }
 }
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
@@ -150,6 +150,7 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
                     class="bg-transparent border-0"
                     (click)="onShowInfoContent()">
                     <i
+                      id="info-content-dropdown__icon"
                       class="info-icon bi bi-info-circle"
                       [ngClass]="{
                         'text-primary': themeService.isDarkMode(),

diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.spec.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.spec.ts
@@ -198,15 +198,6 @@ describe('ProductDetailComponent', () => {
     });
   });
 
-  it('should toggle isDropdownOpen on onShowDropdown', () => {
-    component.isDropdownOpen.set(false);
-    component.onShowInfoContent();
-    expect(component.isDropdownOpen()).toBe(true);
-
-    component.onShowInfoContent();
-    expect(component.isTabDropdownShown()).toBe(false);
-  });
-
   it('should reset state before fetching new product details', () => {
     component.productDetail.set(MOCK_PRODUCT_DETAIL);
     component.productModuleContent.set(
@@ -861,4 +852,15 @@ describe('ProductDetailComponent', () => {
 
     expect(result).toBe(mockedRenderedHtml);
   });
+
+  it('should close the dropdown when clicking outside', () => {
+    component.isDropdownOpen.set(true);
+    fixture.detectChanges();
+
+    const event = new MouseEvent('click');
+    document.dispatchEvent(event);
+    fixture.detectChanges();
+
+    expect(component.isDropdownOpen()).toBeFalse();
+  });
 });
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts
@@ -125,7 +125,6 @@ export class ProductDetailComponent {
     return this.getDisplayedTabsSignal();
   });
   isDropdownOpen: WritableSignal<boolean> = signal(false);
-  isTabDropdownShown: WritableSignal<boolean> = signal(false);
   selectedVersion = '';
   metaProductJsonUrl: string | undefined = '';
   showPopup!: boolean;
@@ -323,8 +322,6 @@ export class ProductDetailComponent {
 
   onTabChange(event: string): void {
     this.setActiveTab(event);
-    this.isTabDropdownShown.update(value => !value);
-    this.onTabDropdownShown();
   }
 
   getSelectedTabLabel(): string {
@@ -363,21 +360,15 @@ export class ProductDetailComponent {
     this.isDropdownOpen.update(value => !value);
   }
 
-  onTabDropdownShown(): void {
-    this.isTabDropdownShown.set(!this.isTabDropdownShown());
-  }
-
   @HostListener('document:click', ['$event'])
   handleClickOutside(event: MouseEvent): void {
-    const formSelect =
-      this.elementRef.nativeElement.querySelector('.form-select');
-
-    if (
-      formSelect &&
-      !formSelect.contains(event.target) &&
-      this.isTabDropdownShown()
+    const nativeElement = this.elementRef.nativeElement;
+    if (!(
+        nativeElement.querySelector('.info-dropdown').contains(event.target) ||
+        nativeElement.querySelector('#info-content-dropdown__icon').contains(event.target)
+      ) && this.isDropdownOpen()
     ) {
-      this.onTabDropdownShown();
+      this.onShowInfoContent();
     }
   }