add custom directive to restore position - attemp fail

apps/openchallenges/app/src/app/app.config.ts

@@ -49,8 +49,9 @@ export const appConfig: ApplicationConfig = {
       routes,
       withEnabledBlockingInitialNavigation(),
       withInMemoryScrolling({
-        scrollPositionRestoration: 'top',
+        scrollPositionRestoration: 'enabled',
       })
+      // withDebugTracing()
     ),
   ],
 };

libs/openchallenges/challenge-search/src/lib/challenge-search.component.html

@@ -1,4 +1,4 @@
-<main sageDisableScrollPositionRestoration class="base mat-typography">
+<main class="base mat-typography">
   <section id="search-top">
     <div id="title" class="row">
       <div class="col col-10">
@@ -52,7 +52,7 @@ <h2>Challenges</h2>
         [toggleable]="true"
         [collapsed]="statusFilter.collapsed"
       >
-        <openchallenges-checkbox-filter
+        <openchallenges-checkbox-filter sageDisableScrollPositionRestoration
           [values]="statusFilter.values"
           [selectedValues]="selectedStatus"
           (selectionChange)="onStatusChange($event)"

libs/openchallenges/challenge-search/src/lib/challenge-search.component.ts

@@ -490,12 +490,18 @@ export class ChallengeSearchComponent
   }
 
   onStatusChange(selected: string[]): void {
-    this.router.navigate([], {
-      queryParamsHandling: 'merge',
-      queryParams: {
-        status: this.collapseParam(selected),
-      },
-    });
+    const currentScrollPosition = window.scrollY;
+    this.router
+      .navigate([], {
+        queryParamsHandling: 'merge',
+        queryParams: {
+          status: this.collapseParam(selected),
+        },
+      })
+      .then(() => {
+        // After the route change is complete, restore the scroll position
+        window.scrollTo(0, currentScrollPosition);
+      });
   }
 
   onSubmissionTypesChange(selected: string[]): void {

libs/shared/typescript/util/src/lib/directives/disable-scroll-position-restoration.directive.ts

@@ -0,0 +1,49 @@
+import { ViewportScroller } from '@angular/common';
+import { Directive, OnInit, DestroyRef } from '@angular/core';
+import { Router, Scroll } from '@angular/router';
+import { filter, map, switchMap, BehaviorSubject, tap } from 'rxjs';
+
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Directive({
+  selector: '[sageDisableScrollPositionRestoration]',
+  standalone: true,
+})
+export class DisableScrollPositionRestorationDirective implements OnInit {
+  shouldScroll = new BehaviorSubject<boolean>(false);
+  private readonly shouldScroll$ = this.shouldScroll.asObservable();
+
+  constructor(
+    private router: Router,
+    private viewportScroller: ViewportScroller,
+    private destroyRef: DestroyRef
+  ) {}
+
+  ngOnInit() {
+    const position$ = this.router.events.pipe(
+      tap((ss) => console.log(ss)),
+      filter((event: any) => event instanceof Scroll),
+      map((event: Scroll) => event.position)
+    );
+
+    position$
+      .pipe(
+        switchMap((position) =>
+          this.shouldScroll$.pipe(
+            filter(Boolean),
+            map(() => position)
+          )
+        ),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe({
+        next: (position) => {
+          this.viewportScroller.scrollToPosition(position || [0, 0]);
+        },
+      });
+  }
+
+  ngAfterViewInit(): void {
+    this.shouldScroll.next(true);
+  }
+}

libs/shared/typescript/util/src/lib/directives/disable-scroll-position-restoration.spec.ts.off

@@ -0,0 +1,8 @@
+import { DisableScrollPositionRestorationDirective } from './disable-scroll-position-restoration.directive';
+
+describe('DisableScrollPositionRestorationDirective', () => {
+  it('should create an instance', () => {
+    const directive = new DisableScrollPositionRestorationDirective();
+    expect(directive).toBeTruthy();
+  });
+});