diff --git a/src/app/features/admin-institutions/components/filters-section/filters-section.component.html b/src/app/features/admin-institutions/components/filters-section/filters-section.component.html
index 5fe8824ad..8f4872ee7 100644
--- a/src/app/features/admin-institutions/components/filters-section/filters-section.component.html
+++ b/src/app/features/admin-institutions/components/filters-section/filters-section.component.html
@@ -20,7 +20,7 @@
+
();
private readonly expandedFilters = signal>(new Set());
-
+ private destroyRef = inject(DestroyRef);
readonly FILTER_PLACEHOLDERS = FILTER_PLACEHOLDERS;
readonly hasFilters = computed(() => {
@@ -98,6 +111,10 @@ export class ReusableFilterComponent {
};
});
+ constructor(private el: ElementRef) {}
+
+ private readonly SCROLL_DELAY_MS = 100;
+
shouldShowFilter(filter: DiscoverableFilter): boolean {
if (!filter || !filter.key) return false;
@@ -112,6 +129,9 @@ export class ReusableFilterComponent {
if (!filterKey) return;
const key = Array.isArray(filterKey) ? filterKey[0]?.toString() : filterKey.toString();
+
+ this.scrollPanelIntoView(key);
+
const selectedFilter = this.filters().find((filter) => filter.key === key);
if (selectedFilter) {
@@ -135,6 +155,31 @@ export class ReusableFilterComponent {
this.filterOptionChanged.emit({ filter, filterOption });
}
+ private scrollPanelIntoView(key: string) {
+ of(key)
+ .pipe(delay(this.SCROLL_DELAY_MS), takeUntilDestroyed(this.destroyRef))
+ .subscribe({
+ next: (key) => {
+ const panelContent = this.el.nativeElement.querySelector(
+ `p-accordion-panel[ng-reflect-value="${key}"] p-accordion-content`
+ );
+
+ const scrollContainer = document.querySelector('.filters-section');
+
+ if (panelContent && scrollContainer) {
+ const contentRect = panelContent.getBoundingClientRect();
+ const containerRect = scrollContainer.getBoundingClientRect();
+ const newScrollTop = scrollContainer.scrollTop + (contentRect.top - containerRect.top);
+
+ scrollContainer.scrollTo({
+ top: newScrollTop,
+ behavior: 'smooth',
+ });
+ }
+ },
+ });
+ }
+
onFilterSearch(filter: DiscoverableFilter, searchText: string): void {
if (filter) {
this.filterSearchChanged.emit({ filter, searchText });