From fcb7349e8e8b79b8455593fb3f8c3d459503701d Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 22 Apr 2025 08:02:43 -0700
Subject: [PATCH] Fix: fix zoom increase/decrease buttons in FF (#9761)

---
 .../document-detail/document-detail.component.html       | 4 ++--
 .../document-detail/document-detail.component.spec.ts    | 9 ++-------
 .../document-detail/document-detail.component.ts         | 8 +++-----
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index c99c35f01..19d6faabb 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -9,9 +9,9 @@
     }
     <div class="input-group input-group-sm me-md-5 d-none d-md-flex">
       <button class="btn btn-outline-secondary" (click)="decreaseZoom()" i18n>-</button>
-      <select class="form-select" (change)="setZoom($event.target.value)">
+      <select class="form-select" (change)="setZoom($event.target.value)" [ngModel]="currentZoom">
         @for (setting of zoomSettings; track setting) {
-          <option [value]="setting" [attr.selected]="isZoomSelected(setting) ? 'selected' : null">
+          <option [value]="setting">
             {{ getZoomSettingTitle(setting) }}
           </option>
         }
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
index 76517d336..345d488eb 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
@@ -791,14 +791,9 @@ describe('DocumentDetailComponent', () => {
   it('should select correct zoom setting in dropdown', () => {
     initNormally()
     component.setZoom(ZoomSetting.PageFit)
-    expect(component.isZoomSelected(ZoomSetting.PageFit)).toBeTruthy()
-    expect(component.isZoomSelected(ZoomSetting.One)).toBeFalsy()
-    component.setZoom(ZoomSetting.PageWidth)
-    expect(component.isZoomSelected(ZoomSetting.One)).toBeTruthy()
-    expect(component.isZoomSelected(ZoomSetting.PageFit)).toBeFalsy()
+    expect(component.currentZoom).toEqual(ZoomSetting.PageFit)
     component.setZoom(ZoomSetting.Quarter)
-    expect(component.isZoomSelected(ZoomSetting.Quarter)).toBeTruthy()
-    expect(component.isZoomSelected(ZoomSetting.PageFit)).toBeFalsy()
+    expect(component.currentZoom).toEqual(ZoomSetting.Quarter)
   })
 
   it('should support updating notes dynamically', () => {
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index 632a2de30..2f5b179b8 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -1099,12 +1099,10 @@ export class DocumentDetailComponent
     )
   }
 
-  isZoomSelected(setting: ZoomSetting): boolean {
+  get currentZoom() {
     if (this.previewZoomScale === ZoomSetting.PageFit) {
-      return setting === ZoomSetting.PageFit
-    }
-
-    return this.previewZoomSetting === setting
+      return ZoomSetting.PageFit
+    } else return this.previewZoomSetting
   }
 
   getZoomSettingTitle(setting: ZoomSetting): string {