MOBILE-4081 settings: Fix font size change click on other elements

src/core/features/settings/pages/general/general.html

@@ -15,7 +15,7 @@
             <ion-label>
                 <h2>{{ 'core.settings.language' | translate }}</h2>
             </ion-label>
-            <ion-select [(ngModel)]="selectedLanguage" (ionChange)="languageChanged()" interface="action-sheet"
+            <ion-select [(ngModel)]="selectedLanguage" (ionChange)="languageChanged($event)" interface="action-sheet"
                 [interfaceOptions]="{header: 'core.settings.language' | translate}">
                 <ion-select-option *ngFor="let entry of languages" [value]="entry.code">{{ entry.name }}</ion-select-option>
             </ion-select>
@@ -24,9 +24,9 @@
             <ion-label>
                 <h2>{{ 'core.settings.fontsize' | translate }}</h2>
             </ion-label>
-            <ion-segment [(ngModel)]="selectedZoomLevel" (ionChange)="zoomLevelChanged()" color="primary">
+            <ion-segment [(ngModel)]="selectedZoomLevel" color="primary">
-                <ion-segment-button *ngFor="let zoomLevel of zoomLevels" [value]="zoomLevel.value"
+                <ion-segment-button *ngFor=" let zoomLevel of zoomLevels" [value]="zoomLevel.value"
-                    [ngStyle]="{'font-size.px': zoomLevel.style}">
+                    [ngStyle]="{'font-size.px': zoomLevel.style}" (click)="zoomLevelChanged($event, zoomLevel.value)">
                     <ion-label>
                         {{ 'core.settings.fontsizecharacter' | translate }}
                         <!-- Empty element styled with the largest font size, so all buttons share a common baseline. -->
@@ -40,7 +40,7 @@
                 <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
                 <p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
             </ion-label>
-            <ion-select [(ngModel)]="selectedScheme" (ionChange)="colorSchemeChanged()" interface="action-sheet"
+            <ion-select [(ngModel)]="selectedScheme" (ionChange)="colorSchemeChanged($event)" interface="action-sheet"
                 [disabled]="colorSchemeDisabled" [interfaceOptions]="{header: 'core.settings.colorscheme' | translate}">
                 <ion-select-option *ngFor="let scheme of colorSchemes" [value]="scheme">
                     {{ 'core.settings.colorscheme-' + scheme | translate }}</ion-select-option>
@@ -56,13 +56,13 @@
                 <h2>{{ 'core.settings.enablerichtexteditor' | translate }}</h2>
                 <p>{{ 'core.settings.enablerichtexteditordescription' | translate }}</p>
             </ion-label>
-            <ion-toggle [(ngModel)]="richTextEditor" (ionChange)="richTextEditorChanged()"></ion-toggle>
+            <ion-toggle [(ngModel)]="richTextEditor" (ionChange)="richTextEditorChanged($event)"></ion-toggle>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="displayIframeHelp">
             <ion-label>
                 <h2>{{ 'core.settings.ioscookies' | translate }}</h2>
                 <p>{{ 'core.settings.ioscookiesdescription' | translate }}</p>
-                <ion-button expand="block" (click)="openNativeSettings()">
+                <ion-button expand="block" (click)="openNativeSettings($event)">
                     {{ 'core.opensettings' | translate }}
                 </ion-button>
             </ion-label>
@@ -72,14 +72,14 @@
                 <h2>{{ 'core.settings.debugdisplay' | translate }}</h2>
                 <p>{{ 'core.settings.debugdisplaydescription' | translate }}</p>
             </ion-label>
-            <ion-toggle [(ngModel)]="debugDisplay" (ionChange)="debugDisplayChanged()"></ion-toggle>
+            <ion-toggle [(ngModel)]="debugDisplay" (ionChange)="debugDisplayChanged($event)"></ion-toggle>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="analyticsSupported">
             <ion-label>
                 <h2>{{ 'core.settings.enablefirebaseanalytics' | translate }}</h2>
                 <p>{{ 'core.settings.enablefirebaseanalyticsdescription' | translate }}</p>
             </ion-label>
-            <ion-toggle [(ngModel)]="analyticsEnabled" (ionChange)="analyticsEnabledChanged()"></ion-toggle>
+            <ion-toggle [(ngModel)]="analyticsEnabled" (ionChange)="analyticsEnabledChanged($event)"></ion-toggle>
         </ion-item>
     </ion-list>
 </ion-content>

src/core/features/settings/pages/general/general.ts

@@ -111,8 +111,13 @@ export class CoreSettingsGeneralPage {
 
     /**
      * Called when a new language is selected.
+     *
+     * @param ev: Event
      */
-    async languageChanged(): Promise<void> {
+    async languageChanged(ev: Event): Promise<void> {
+        ev.stopPropagation();
+        ev.preventDefault();
+
         const previousLanguage = await CoreLang.getCurrentLanguage();
         if (this.selectedLanguage === previousLanguage) {
             // Prevent opening again.
@@ -177,8 +182,16 @@ export class CoreSettingsGeneralPage {
 
     /**
      * Called when a new zoom level is selected.
+     *
+     * @param ev: Event
+     * @param value: New value
      */
-    zoomLevelChanged(): void {
+    zoomLevelChanged(ev: Event, value: CoreZoomLevel): void {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        this.selectedZoomLevel = value;
+
         this.zoomLevels = this.zoomLevels.map((fontSize) => {
             fontSize.selected = fontSize.value === this.selectedZoomLevel;
 
@@ -191,31 +204,51 @@ export class CoreSettingsGeneralPage {
 
     /**
      * Called when a new color scheme is selected.
+     *
+     * @param ev: Event
      */
-    colorSchemeChanged(): void {
+    colorSchemeChanged(ev: Event): void {
+        ev.stopPropagation();
+        ev.preventDefault();
+
         CoreSettingsHelper.setColorScheme(this.selectedScheme);
         CoreConfig.set(CoreConstants.SETTINGS_COLOR_SCHEME, this.selectedScheme);
     }
 
     /**
      * Called when the rich text editor is enabled or disabled.
+     *
+     * @param ev: Event
      */
-    richTextEditorChanged(): void {
+    richTextEditorChanged(ev: Event): void {
+        ev.stopPropagation();
+        ev.preventDefault();
+
         CoreConfig.set(CoreConstants.SETTINGS_RICH_TEXT_EDITOR, this.richTextEditor ? 1 : 0);
     }
 
     /**
      * Called when the debug display setting is enabled or disabled.
+     *
+     * @param ev: Event
      */
-    debugDisplayChanged(): void {
+    debugDisplayChanged(ev: Event): void {
+        ev.stopPropagation();
+        ev.preventDefault();
+
         CoreConfig.set(CoreConstants.SETTINGS_DEBUG_DISPLAY, this.debugDisplay ? 1 : 0);
         CoreDomUtils.setDebugDisplay(this.debugDisplay);
     }
 
     /**
      * Called when the analytics setting is enabled or disabled.
+     *
+     * @param ev: Event
      */
-    async analyticsEnabledChanged(): Promise<void> {
+    async analyticsEnabledChanged(ev: Event):  Promise<void> {
+        ev.stopPropagation();
+        ev.preventDefault();
+
         await CorePushNotifications.enableAnalytics(this.analyticsEnabled);
 
         CoreConfig.set(CoreConstants.SETTINGS_ANALYTICS_ENABLED, this.analyticsEnabled ? 1 : 0);
@@ -223,8 +256,13 @@ export class CoreSettingsGeneralPage {
 
     /**
      * Open native settings.
+     *
+     * @param ev: Event
      */
-    openNativeSettings(): void {
+    openNativeSettings(ev: Event): void {
+        ev.stopPropagation();
+        ev.preventDefault();
+
         Diagnostic.switchToSettings();
     }