From 66a60476ac968f7349cc0d44eb62c1a61b7fb2ab Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Tue, 3 Jan 2012 14:42:56 +0100 Subject: [PATCH] MINOR Close open TreeDropdownField panels if user clicks outside of the field (emulate behaviour of chosen.js and most native OS dropdowns) --- javascript/TreeDropdownField.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/javascript/TreeDropdownField.js b/javascript/TreeDropdownField.js index 5d4deef3f..41ec90ecd 100644 --- a/javascript/TreeDropdownField.js +++ b/javascript/TreeDropdownField.js @@ -13,7 +13,12 @@ 'fieldTitle': '(choose)', 'searchFieldTitle': '(choose or search)' }; - + + var _clickTestFn = function(e) { + // If the click target is not a child of the current field, close the panel automatically. + if(!$(e.target).parents('.TreeDropdownField').length) jQuery('.TreeDropdownField').entwine('ss').closePanel(); + }; + /** * @todo Error display * @todo No results display for search @@ -45,6 +50,9 @@ openPanel: function() { // close all other panels $('.TreeDropdownField').closePanel(); + + // Listen for clicks outside of the field to auto-close it + $('body').bind('click', _clickTestFn); var panel = this.getPanel(), tree = this.find('.tree-holder'); @@ -80,6 +88,8 @@ }, closePanel: function() { + jQuery('body').unbind('click', _clickTestFn); + // swap the up arrow with a down arrow var toggle = this.find(".treedropdownfield-toggle-panel-link"); toggle.removeClass('treedropdownfield-open-tree');