[ACS-6140] - search-tab-content does not show when changing tab multi…

…ple times (#9332)
Alfresco · Feb 13, 2024 · 378b125 · 378b125
1 parent 8df2113
commit 378b125
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/...rvices/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.html b/...rvices/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.html
@@ -1,6 +1,7 @@
 <mat-tab-group (selectedIndexChange)="onTabIndexChanged($event)">
     <mat-tab *ngFor="let tabContent of tabsContents; let i = index"
              [labelClass]='selectedIndex === i ? "adf-search-tab-label-active" : ""'
+             [bodyClass]='selectedIndex === i ? "adf-search-tab-content-active" : ""'
              label="{{tabContent.name | translate}}">
         <ng-container *ngTemplateOutlet="tabContent.templateRef"></ng-container>
     </mat-tab>

diff --git a/...rvices/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss b/...rvices/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss
@@ -2,4 +2,13 @@ adf-search-filter-tabbed {
     .adf-search-tab-label-active {
         border-bottom: 2px solid var(--theme-primary-color);
     }
+
+    // The important tag is used here as a workaround for a bug in angular material, when MatTabs are used in conjunction with MatMenu
+    // https://github.com/angular/components/issues/27426
+    .adf-search-tab-content-active {
+        & > div {
+            visibility: visible !important;
+            display: block !important;
+        }
+    }
 }