Merge pull request #1780 from thebiggive/DON-1092-search-scroll-refin…

…ement

DON-1092 – fix campaign card grid input focus breaking Safari scroll positions

package.json

@@ -44,8 +44,8 @@
     "@angular/platform-server": "^18.2.8",
     "@angular/router": "^18.2.8",
     "@angular/ssr": "^18.2.8",
-    "@biggive/components": "^202411151222.0.0",
-    "@biggive/components-angular": "^202411151222.0.0",
+    "@biggive/components": "^202411271427.0.0",
+    "@biggive/components-angular": "^202411271427.0.0",
     "@fortawesome/angular-fontawesome": "~0.15.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",

src/app/explore/explore.component.ts

@@ -1,6 +1,7 @@
-import {DatePipe, isPlatformBrowser} from '@angular/common';
-import {Component, HostListener, Inject, OnDestroy, OnInit, PLATFORM_ID} from '@angular/core';
+import {DatePipe, isPlatformBrowser, ViewportScroller} from '@angular/common';
+import {Component, HostListener, Inject, OnDestroy, OnInit, PLATFORM_ID, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
+import { BiggiveCampaignCardFilterGrid } from '@biggive/components-angular';
 import {skip, Subscription} from 'rxjs';
 
 import {currencyPipeDigitsInfo} from '../../environments/common';
@@ -19,15 +20,19 @@ import {HighlightCard} from "../highlight-cards/HighlightCard";
   providers: [DatePipe]
 })
 export class ExploreComponent implements OnDestroy, OnInit {
+  @ViewChild(BiggiveCampaignCardFilterGrid) cardGrid: BiggiveCampaignCardFilterGrid;
+
   campaigns: CampaignSummary[];
   currencyPipeDigitsInfo = currencyPipeDigitsInfo;
   loading = false; // Server render gets initial result set; set true when filters change.
   /** Whether any non-default search logic besides an order change has been applied. */
   searched = false;
 
+  private blurredSinceLastMajorScroll = false;
   private offset = 0;
   private routeParamSubscription: Subscription;
   private searchServiceSubscription: Subscription;
+  private readonly smallestSignificantScrollPx = 250;
 
   beneficiaryOptions: string[] = [];
   categoryOptions: string[] = [];
@@ -47,6 +52,7 @@ export class ExploreComponent implements OnDestroy, OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private pageMeta: PageMetaService,
+    private scroller: ViewportScroller,
     public searchService: SearchService,
     @Inject(PLATFORM_ID) private platformId: Object,
   ) {}
@@ -124,6 +130,18 @@ export class ExploreComponent implements OnDestroy, OnInit {
   }
 
   onScroll() {
+    const scrollPositionY = this.scroller.getScrollPosition()[1];
+    if (scrollPositionY < this.smallestSignificantScrollPx) {
+      // If we're now near the top, reset any previous input blurring as it might be helpful to blur again.
+      this.blurredSinceLastMajorScroll = false;
+      return;
+    }
+
+    if (!this.blurredSinceLastMajorScroll) {
+      this.cardGrid && this.cardGrid.unfocusInputs();
+      this.blurredSinceLastMajorScroll = true;
+    }
+
     if (this.moreMightExist()) {
       this.more();
     }

src/app/meta-campaign/meta-campaign.component.ts

@@ -11,8 +11,10 @@ import {
   PLATFORM_ID,
   StateKey,
   TransferState,
+  ViewChild,
 } from '@angular/core';
 import { ActivatedRoute, Router, NavigationEnd, NavigationStart } from '@angular/router';
+import { BiggiveCampaignCardFilterGrid } from '@biggive/components-angular';
 import {SESSION_STORAGE, StorageService} from 'ngx-webstorage-service';
 import {skip, Subscription} from 'rxjs';
 
@@ -46,6 +48,8 @@ const endPipeToken = 'timeLeftToEndPipe';
   ],
 })
 export class MetaCampaignComponent implements AfterViewChecked, OnDestroy, OnInit {
+  @ViewChild(BiggiveCampaignCardFilterGrid) cardGrid: BiggiveCampaignCardFilterGrid;
+
   // Campaign ID may be passed instead
   @Input({ required: false }) private campaignSlug: string;
   // Passed only on the fund-filtered view of this page.
@@ -63,6 +67,7 @@ export class MetaCampaignComponent implements AfterViewChecked, OnDestroy, OnIni
   public title: string; // Includes fund info if applicable.
 
   private autoScrollTimer: number | undefined; // State update setTimeout reference, for client side scroll to previous position.
+  private blurredSinceLastMajorScroll = false;
   private campaignId: string;
   private offset = 0;
   private routeChangeListener: Subscription;
@@ -202,14 +207,23 @@ export class MetaCampaignComponent implements AfterViewChecked, OnDestroy, OnIni
   }
 
   onScroll() {
-    if (this.scroller.getScrollPosition()[1] < this.smallestSignificantScrollPx) {
+    const scrollPositionY = this.scroller.getScrollPosition()[1];
+    if (scrollPositionY < this.smallestSignificantScrollPx) {
+      // If we're now near the top, reset any previous input blurring as it might be helpful to blur again.
+      this.blurredSinceLastMajorScroll = false;
+
       // On return with internal app nav, automatic position seems to be [0,59]
       // or so as of Nov '22. So we want only larger scrolls to be picked up as
       // donor intervention and to turn off auto-scroll + trigger loading of
       // additional campaigns.
       return;
     }
 
+    if (!this.blurredSinceLastMajorScroll) {
+      this.cardGrid && this.cardGrid.unfocusInputs();
+      this.blurredSinceLastMajorScroll = true;
+    }
+
     this.shouldAutoScroll = false;
 
     if (this.moreMightExist()) {
@@ -396,7 +410,8 @@ export class MetaCampaignComponent implements AfterViewChecked, OnDestroy, OnIni
   private listenForRouteChanges() {
     this.routeChangeListener = this.router.events.subscribe(event => {
       if (event instanceof NavigationStart) {
-        this.navigationService.saveLastScrollY(this.scroller.getScrollPosition()[1]);
+        const scrollPositionY = this.scroller.getScrollPosition()[1];
+        this.navigationService.saveLastScrollY(scrollPositionY);
 
         if (isPlatformBrowser(this.platformId) && this.autoScrollTimer) {
           window.clearTimeout(this.autoScrollTimer);