Add option to focus a treelist widget on clicks to the container (#1489997)

2 files changed, 14 insertions, 0 deletions

diff --git a/program/js/app.js b/program/js/app.js
index 0fca47191..e5a70c9f1 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -563,6 +563,7 @@ function rcube_webmail()
       this.treelist = new rcube_treelist_widget(this.gui_objects.folderlist, {
           selectable: true,
           id_prefix: 'rcmli',
+          parent_focus: true,
           id_encode: this.html_identifier_encode,
           id_decode: this.html_identifier_decode,
           check_droptarget: function(node) { return !node.virtual && ref.check_droptarget(node.id) }
@@ -5751,6 +5752,7 @@ function rcube_webmail()
     this.subscription_list = new rcube_treelist_widget(this.gui_objects.subscriptionlist, {
         selectable: true,
         tabexit: false,
+        parent_focus: true,
         id_prefix: 'rcmli',
         id_encode: this.html_identifier_encode,
         id_decode: this.html_identifier_decode,
diff --git a/program/js/treelist.js b/program/js/treelist.js
index 3a1360229..a7cd7cd43 100644
--- a/program/js/treelist.js
+++ b/program/js/treelist.js
@@ -47,6 +47,7 @@ function rcube_treelist_widget(node, p)
     save_state: false,
     keyboard: true,
     tabexit: true,
+    parent_focus: false,
     check_droptarget: function(node) { return !node.virtual; }
   }, p || {});
 
@@ -187,6 +188,17 @@ function rcube_treelist_widget(node, p)
   $(document.body)
     .bind('keydown', keypress);
 
+  // catch focus when clicking the list container area
+  if (p.parent_focus) {
+    container.parent(':not(body)').click(function(e) {
+      if (!has_focus && selection) {
+        $(get_item(selection)).find(':focusable').first().focus();
+      }
+      else if (!has_focus) {
+        container.children('li:has(:focusable)').first().find(':focusable').first().focus();
+      }
+    });
+  }
 
   /////// private methods