MOBILE-3909 calendar: Select custom value when input is clicked

src/addons/calendar/components/reminder-time-modal/reminder-time-modal.html

@@ -38,7 +38,8 @@
 
             <div class="flex-row">
                 <!-- Input to enter the value. -->
-                <ion-input type="number" name="customvalue" [(ngModel)]="customValue" [disabled]="radioValue != 'custom'" placeholder="10">
+                <ion-input type="number" name="customvalue" [(ngModel)]="customValue" [disabled]="radioValue != 'custom'" placeholder="10"
+                    (click)="customInputClicked($event)">
                 </ion-input>
 
                 <!-- Units. -->

src/addons/calendar/components/reminder-time-modal/reminder-time-modal.ts

@@ -15,6 +15,7 @@
 import { AddonCalendar, AddonCalendarReminderUnits, AddonCalendarValueAndUnit } from '@addons/calendar/services/calendar';
 import { Component, Input, OnInit } from '@angular/core';
 import { CoreDomUtils } from '@services/utils/dom';
+import { CoreUtils } from '@services/utils/utils';
 import { ModalController } from '@singletons';
 
 /**
@@ -153,4 +154,24 @@ export class AddonCalendarReminderTimeModalComponent implements OnInit {
         }
     }
 
+    /**
+     * Custom value input clicked.
+     *
+     * @param ev Click event.
+     */
+    async customInputClicked(ev: Event): Promise<void> {
+        if (this.radioValue === 'custom') {
+            return;
+        }
+
+        this.radioValue = 'custom';
+
+        await CoreUtils.nextTick();
+
+        const target = <HTMLInputElement | Element | null> ev.target;
+        if (target && 'focus' in target) {
+            target.focus();
+        }
+    }
+
 }