Added: Made close on blur configurable

Author: pkempenaers

src/app/component/dropdownTree.controller.js

@@ -22,6 +22,7 @@ export default class DropDownTreeController {
 this.settings = {
 displayProperty: 'name',
 childrenProperty: 'children',
+closeOnBlur: true,
 selectedClass: [
 'glyphicon',
 'glyphicon-ok',
@@ -48,7 +49,7 @@ export default class DropDownTreeController {
 
 toggleDropdown() {
 this.open = !this.open;
-if (this.open) {
+if (this.open && this.settings.closeOnBlur) {
 this.closeToggleOnBlurBinded = this.toggleOnBlur.bind(this);
 this.$document.on('click', this.closeToggleOnBlurBinded);
 }

src/app/main/main.controller.js

@@ -19,6 +19,9 @@ export default class MainController {
 ],
 },
 ];
+
+this.settings = {
+};
 }
 
 selectionChanged(selection) {

src/app/main/main.template.html

@@ -18,7 +18,8 @@ <h1>AngularJS Dropdown Tree</h1>
 <div>
 <h2>Examlpe</h2>
 <dropdown-tree options="$ctrl.options"
- selection-changed="$ctrl.selectionChanged(selection)">
+ selection-changed="$ctrl.selectionChanged(selection)"
+ settings="$ctrl.settings">
 </dropdown-tree>
 </div>
 <div>
@@ -108,6 +109,12 @@ <h3>Settings</h3>
 <td>string or array of string</td>
 <td>When an option is selcted a span is added with the classes configured</td>
 </tr>
+<tr>
+<td>closeOnBlur</td>
+<td>true</td>
+<td>boolean</td>
+<td>When true will close the dropdown when clicked outside of it.</td>
+</tr>
 </tbody>
 </table>
 </div>