fixed popover in more functions

SE/static/p5UI/buildDom.js

@@ -364,7 +364,7 @@
           : null
         ,
         (this.props.viewMoreDropdown)
-          ? h(P5UI__DropdownAjax, this.props.viewMoreDropdown)
+          ? h(P5UI__MoreFunctionsDropdownAjax, this.props.viewMoreDropdown)
           : null
         ,
       ])
@@ -372,7 +372,7 @@
   })
   global.p5VendorJs['P5UI__FeatureRowFunctions'] = P5UI__FeatureRowFunctions
 
-  var P5UI__DropdownAjax = createReactClass({
+  var P5UI__MoreFunctionsDropdownAjax = createReactClass({
     componentDidMount: function () {
       jQuery(this.rootNode).popover({
         container: 'body',
@@ -395,25 +395,33 @@
       this.setState({ 'isOpen': false })
     },
     componentWillUnmount: function () {
-      jQuery(this.rootNode).popover('desctroy')
+      if(DBG)console.warn("P5UI__MoreFunctionsDropdownAjax::componentWillUnmount")
+      jQuery(this.rootNode).popover('destroy')
     },
     componentWillMount: function() {
       this._closeDropdownIfClickedOutside = function (event) {
     		if (!this.state.isOpen) return;
 
         var idHtmlPopover = jQuery(this.rootNode).attr('aria-describedby')
-        if(DBG)console.warn("P5UI__DropdownAjax::_closeDropdownIfClickedOutside idHtmlPopover:", idHtmlPopover)
+        if(DBG)console.warn("P5UI__MoreFunctionsDropdownAjax::_closeDropdownIfClickedOutside idHtmlPopover:", idHtmlPopover)
         if (!idHtmlPopover) return;
 
     		var popoverNode = document.getElementById(idHtmlPopover)
-    		if (p5UI__clickedOutsideElement(popoverNode, event)) {
+        var isClickedOutside = p5UI__clickedOutsideElement(popoverNode, event)
+        if(DBG)console.warn("P5UI__MoreFunctionsDropdownAjax::_closeDropdownIfClickedOutside isClickedOutside:", isClickedOutside, 'this.rootNode', this.rootNode)
+    		if (isClickedOutside) {
+          if (jQuery(this.rootNode).data("bs.popover")) {
+            jQuery(this.rootNode).popover('hide')
+          } else {
+            popoverNode.parentNode.removeChild(popoverNode) // DOM removed before 'hide'
+          }
     			this.setState({
     				isOpen: false
-    			}, this._unbindCloseDropdownIfClickedOutside);
-          jQuery(this.rootNode).popover('hide')
+    			}, this._unbindCloseDropdownIfClickedOutside.bind(this));
     		}
     	}.bind(this);
       this._bindCloseDropdownIfClickedOutside = function () {
+        if(DBG)console.warn("P5UI__MoreFunctionsDropdownAjax::_bindCloseDropdownIfClickedOutside", this._closeDropdownIfClickedOutside)
     		if (!document.addEventListener && document.attachEvent) {
     			document.attachEvent('onclick', this._closeDropdownIfClickedOutside);
     		} else {
@@ -421,6 +429,7 @@
     		}
     	}.bind(this);
       this._unbindCloseDropdownIfClickedOutside = function () {
+        if(DBG)console.warn("P5UI__MoreFunctionsDropdownAjax::_unbindCloseDropdownIfClickedOutside", this._closeDropdownIfClickedOutside)
     		if (!document.removeEventListener && document.detachEvent) {
     			document.detachEvent('onclick', this._closeDropdownIfClickedOutside);
     		} else {
@@ -433,7 +442,7 @@
       if (!this.state) return false
       if (this.state.rowFunctions !== nextState.rowFunctions) {
         var idHtmlPopover = jQuery(this.rootNode).attr('aria-describedby')
-        if(DBG)console.warn("P5UI__DropdownAjax::shouldComponentUpdate idHtmlPopover:", idHtmlPopover, 'nextState.rowFunctions', nextState.rowFunctions)
+        if(DBG)console.warn("P5UI__MoreFunctionsDropdownAjax::shouldComponentUpdate idHtmlPopover:", idHtmlPopover, 'nextState.rowFunctions', nextState.rowFunctions)
         if (idHtmlPopover && nextState.rowFunctions && nextState.rowFunctions.length) {
           jQuery(document.getElementById(idHtmlPopover)).find('.popover-content').html(this.renderListToString(nextState.rowFunctions))
         } else {
@@ -443,15 +452,15 @@
       return false
     },
     renderListToString: function (list) {
-      if(DBG)console.warn('P5UI__DropdownAjax::renderListToString - this.state:', this.state)
+      if(DBG)console.warn('P5UI__MoreFunctionsDropdownAjax::renderListToString - this.state:', this.state)
       var primaryKey = this.props.id
       var out = '<ul class="list-unstyled">' + list.map(function (fun) {
         return '<li><a href="'+fun.href.replace('{0}', primaryKey)+'" style="margin:0 2px;" title="'+fun.title+'">' +
           (fun.ico ? '<span class="'+fun.ico+'"></span> ' : '') +
-          fun.label +
+          (fun.label || fun.title) +
         '</a></li>'
       }).join('') + '</ul>'
-      if(DBG)console.warn('P5UI__DropdownAjax::renderListToString - out:', out)
+      if(DBG)console.warn('P5UI__MoreFunctionsDropdownAjax::renderListToString - out:', out)
       return out
     },
     onAjaxFetch: function (data) {
@@ -459,8 +468,7 @@
     },
     handleClick: function (e) {
       e.preventDefault()
-      if(DBG)console.warn("P5UI__DropdownAjax::handleClick TODO: dropdown clicked - state:", this.state)
-      if (!this.props.uri) throw "Missing uri in P5UI__DropdownAjax"
+      if (!this.props.uri) throw "Missing uri in P5UI__MoreFunctionsDropdownAjax"
       if (this.state.isOpen) {
         jQuery(this.rootNode).popover('hide')
       } else {
@@ -493,7 +501,7 @@
       }
     },
     render: function () {
-      if(DBG)console.warn('P5UI__DropdownAjax::render this.props', this.props)
+      if(DBG)console.warn('P5UI__MoreFunctionsDropdownAjax::render this.props', this.props)
       return h('button', {
         className: 'btn btn-xs btn-link',
         ref: function (node) { this.rootNode = node; }.bind(this),
@@ -504,7 +512,7 @@
       ]);
     }
   })
-  global.p5VendorJs['P5UI__DropdownAjax'] = P5UI__DropdownAjax
+  global.p5VendorJs['P5UI__MoreFunctionsDropdownAjax'] = P5UI__MoreFunctionsDropdownAjax
 
 
   function buildDom(dom, target) {