Feature/marp 809 firefox not scroll to top after go to product detail (…

…#102)
axonivy-market · Aug 16, 2024 · bff1c71 · bff1c71
1 parent 76f49c2
commit bff1c71
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/marketplace-ui/src/app/app.config.ts b/marketplace-ui/src/app/app.config.ts
@@ -1,17 +1,25 @@
 import { HttpClient, provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
 import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { InMemoryScrollingFeature, InMemoryScrollingOptions, provideRouter, withInMemoryScrolling } from '@angular/router';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { routes } from './app.routes';
 import { MARKED_OPTIONS, MarkdownModule } from 'ngx-markdown';
 import { markedOptionsFactory } from './core/configs/markdown.config';
 import { httpLoaderFactory } from './core/configs/translate.config';
 import { apiInterceptor } from './core/interceptors/api.interceptor';
 
+const scrollConfig: InMemoryScrollingOptions = {
+  scrollPositionRestoration: 'disabled',
+  anchorScrolling: 'disabled',
+};
+
+const inMemoryScrollingFeature: InMemoryScrollingFeature =
+  withInMemoryScrolling(scrollConfig);
+
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
+    provideRouter(routes, inMemoryScrollingFeature),
     provideHttpClient(withFetch(), withInterceptors([apiInterceptor])),
     importProvidersFrom(
       TranslateModule.forRoot({

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
@@ -29,7 +29,7 @@ import { AuthService } from '../../../auth/auth.service';
 import { ProductStarRatingNumberComponent } from './product-star-rating-number/product-star-rating-number.component';
 import { ProductInstallationCountActionComponent } from './product-installation-count-action/product-installation-count-action.component';
 import { ProductTypeIconPipe } from '../../../shared/pipes/icon.pipe';
-import { interval, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 import { ProductStarRatingService } from './product-detail-feedback/product-star-rating-panel/product-star-rating.service';
 import { RoutingQueryParamService } from '../../../shared/services/routing.query.param.service';
 
@@ -42,7 +42,6 @@ export interface DetailTab {
 
 const STORAGE_ITEM = 'activeTab';
 const DEFAULT_ACTIVE_TAB = 'description';
-const SCROLL_INTERVAL = 500;
 @Component({
   selector: 'app-product-detail',
   standalone: true,
@@ -134,12 +133,7 @@ export class ProductDetailComponent {
   }
 
   scrollToTop() {
-    const intervalSub = interval(SCROLL_INTERVAL).subscribe(() => {
-      window.scrollTo({left: 0, top: 0, behavior: 'instant'});
-    });
-    setTimeout(() => {
-      intervalSub.unsubscribe();
-    }, 1000);
+    window.scrollTo({ left: 0, top: 0, behavior: 'instant' });
   }
 
   getProductById(productId: string): Observable<ProductDetail> {