Fix filter popovers in modals (#3844)

Since popovers and modals currently share the same z-index (600) a popover that gets created for a filter inside a modal is invisible. It is hidden below the modal. This commit adds a check to see if a filter is created from within a modal window. If yes, the popover will be added to the modal container. Otherwise the default container value `false` is used. Credit to @tobias-kuendig

modules/system/assets/ui/js/filter.js

@@ -223,7 +223,15 @@
         var self = this,
             scopeName = $scope.data('scope-name'),
             data = this.scopeValues[scopeName],
-            isLoaded = true
+            isLoaded = true,
+            container = false
+
+        // If the filter is running in a modal, popovers should be
+        // attached to the modal container. This prevents z-index issues.
+        var modalParent = $scope.parents('.modal-dialog')
+        if (modalParent.length > 0) {
+            container = modalParent[0]
+        }
 
         if (!data) {
             data = { loading: true }
@@ -246,7 +254,8 @@
             modal: false,
             highlightModalTarget: true,
             closeOnPageClick: true,
-            placement: 'bottom'
+            placement: 'bottom',
+            container: container
         })
         
         this.toggleFilterButtons()

modules/system/assets/ui/storm-min.js

@@ -3077,14 +3077,16 @@ this.toggleFilterButtons(items)
 this.updateScopeSetting(this.$activeScope,items.active.length)
 this.isActiveScopeDirty=true
 this.focusSearch()}
-FilterWidget.prototype.displayPopover=function($scope){var self=this,scopeName=$scope.data('scope-name'),data=this.scopeValues[scopeName],isLoaded=true
+FilterWidget.prototype.displayPopover=function($scope){var self=this,scopeName=$scope.data('scope-name'),data=this.scopeValues[scopeName],isLoaded=true,container=false
+var modalParent=$scope.parents('.modal-dialog')
+if(modalParent.length>0){container=modalParent[0]}
 if(!data){data={loading:true}
 isLoaded=false}
 data=$.extend({},data,{apply_button_text:this.getLang('filter.scopes.apply_button_text','Apply'),clear_button_text:this.getLang('filter.scopes.clear_button_text','Clear')})
 data.scopeName=scopeName
 data.optionsHandler=self.options.optionsHandler
 $scope.data('oc.popover',null)
-$scope.ocPopover({content:Mustache.render(self.getPopoverTemplate(),data),modal:false,highlightModalTarget:true,closeOnPageClick:true,placement:'bottom'})
+$scope.ocPopover({content:Mustache.render(self.getPopoverTemplate(),data),modal:false,highlightModalTarget:true,closeOnPageClick:true,placement:'bottom',container:container})
 this.toggleFilterButtons()
 if(!isLoaded){self.loadOptions(scopeName)}}
 FilterWidget.prototype.loadOptions=function(scopeName){var $form=this.$el.closest('form'),self=this,data={scopeName:scopeName}