(js) Fix renaming a folder under iOS

NEWS

@@ -8,6 +8,7 @@ Bug fixes
  - [core] properly update the last-modified attribute (#4313)
  - [web] prevent deletion of special folders using del key
  - [web] fixed SAML2 session timeout handling during XHR requests
+ - [web] fixed renaming a folder under iOS
  - [eas] improved alarms syncing with EAS devices (#4351)
  - [eas] avoid potential cache update when breaking sync queries (#4422)
 

UI/WebServerResources/js/Mailer/sgMailboxListItem.directive.js

@@ -52,8 +52,8 @@
   /**
    * @ngInject
    */
-  sgMailboxListItemController.$inject = ['$scope', '$element', '$state', '$mdToast', '$mdPanel', '$mdMedia', '$mdSidenav', 'sgConstant', 'Dialog', 'Mailbox', 'encodeUriFilter'];
-  function sgMailboxListItemController($scope, $element, $state, $mdToast, $mdPanel, $mdMedia, $mdSidenav, sgConstant, Dialog, Mailbox, encodeUriFilter) {
+  sgMailboxListItemController.$inject = ['$scope', '$element', '$state', '$timeout', '$mdToast', '$mdPanel', '$mdMedia', '$mdSidenav', 'sgConstant', 'Dialog', 'Mailbox', 'encodeUriFilter'];
+  function sgMailboxListItemController($scope, $element, $state, $timeout, $mdToast, $mdPanel, $mdMedia, $mdSidenav, sgConstant, Dialog, Mailbox, encodeUriFilter) {
     var $ctrl = this;
 
 
@@ -105,15 +105,24 @@
 
 
     this.editFolder = function($event) {
+      $event.stopPropagation();
+      $event.preventDefault();
       this.editMode = true;
       this.inputElement.value = this.mailbox.name;
       this.clickableElement.classList.add('ng-hide');
       this.inputContainer.classList.remove('ng-hide');
-      this.inputElement.focus();
-      this.inputElement.select();
-      if ($event) {
-        $event.stopPropagation();
-        $event.preventDefault();
+      if ($event.srcEvent.type == 'touchend') {
+        $timeout(function() {
+          $ctrl.inputElement.select();
+          $ctrl.inputElement.focus();
+        }, 200); // delayed focus for iOS
+      }
+      else {
+        this.inputElement.select();
+        this.inputElement.focus();
+      }
+      if (this.panel) {
+        this.panel.close();
       }
     };
 
@@ -188,7 +197,8 @@
         locals: {
           itemCtrl: this,
           folder: this.mailbox,
-          confirmDelete: this.confirmDelete
+          editFolder: angular.bind(this, this.editFolder),
+          confirmDelete: angular.bind(this, this.confirmDelete)
         },
         bindToController: true,
         controller: MenuController,
@@ -205,6 +215,7 @@
 
       $mdPanel.open(config)
         .then(function(panelRef) {
+          $ctrl.panel = panelRef;
           // Automatically close panel when clicking inside of it
           panelRef.panelEl.one('click', function() {
             panelRef.close();
@@ -233,10 +244,6 @@
             });
         };
 
-        this.editFolder = function() {
-          this.itemCtrl.editFolder();
-        };
-
         this.compactFolder = function() {
           this.folder.$compact().then(function() {
             $mdToast.show(

UI/WebServerResources/js/Scheduler/sgCalendarListItem.directive.js

@@ -53,8 +53,8 @@
   /**
    * @ngInject
    */
-  sgCalendarListItemController.$inject = ['$rootScope', '$scope', '$element', '$mdToast', '$mdPanel', '$mdMedia', '$mdSidenav', 'sgConstant', 'Dialog', 'Calendar'];
-  function sgCalendarListItemController($rootScope, $scope, $element, $mdToast, $mdPanel, $mdMedia, $mdSidenav, sgConstant, Dialog, Calendar) {
+  sgCalendarListItemController.$inject = ['$rootScope', '$scope', '$element', '$timeout', '$mdToast', '$mdPanel', '$mdMedia', '$mdSidenav', 'sgConstant', 'Dialog', 'Calendar'];
+  function sgCalendarListItemController($rootScope, $scope, $element, $timeout, $mdToast, $mdPanel, $mdMedia, $mdSidenav, sgConstant, Dialog, Calendar) {
     var $ctrl = this;
 
 
@@ -81,15 +81,24 @@
 
 
     this.editFolder = function($event) {
+      $event.stopPropagation();
+      $event.preventDefault();
       this.editMode = true;
       this.inputElement.value = this.calendar.name;
       this.clickableElement.classList.add('ng-hide');
       this.inputContainer.classList.remove('ng-hide');
-      this.inputElement.focus();
-      this.inputElement.select();
-      if ($event) {
-        $event.stopPropagation();
-        $event.preventDefault();
+      if ($event.srcEvent.type == 'touchend') {
+        $timeout(function() {
+          $ctrl.inputElement.focus();
+          $ctrl.inputElement.select();
+        }, 200); // delayed focus for iOS
+      }
+      else {
+        this.inputElement.select();
+        this.inputElement.focus();
+      }
+      if (this.panel) {
+        this.panel.close();
       }
     };
 
@@ -180,6 +189,7 @@
 
       $mdPanel.open(config)
         .then(function(panelRef) {
+          $ctrl.panel = panelRef;
           // Automatically close panel when clicking inside of it
           panelRef.panelEl.one('click', function() {
             panelRef.close();

UI/WebServerResources/scss/components/list/list.scss

@@ -54,12 +54,14 @@ md-list-item {
   .sg-item-name {
     align-items: flex-start;
     font-size: sg-size(button);
-    line-height: $list-item-height;
     max-width: 75%; // leave some place for a secondary button
     overflow: hidden;
     text-overflow: ellipsis;
     text-transform: initial;
     white-space: nowrap;
+    @include from(md) {
+      line-height: $list-item-height;
+    }
   }
   .sg-inline-list-icon-label {
     text-transform: uppercase;