Hi,

I have created a grid editor with settings. In this settings, I am trying to open a mediaPicker with editorService.mediaPicker in the angular controller. When I'm done with the image I close the mediapicker with editorService.close(). The problem here is that it closes the mediapicker dialog and the row-settings dialog both instead of the last one.

here is a gif of what happens:

I open the mediaPicker like this:

$scope.addImage = function () {
            editorService.mediaPicker({
                onlyImages: true,
                multiPicker: false,
                submit: function (item) {
                    $scope.value = {
                        id: item.id,
                        icon: item.icon,
                        name: item.name,
                        image: item.image,
                        alt: getValueOf(item.selection[0].properties, "Alt"),
                        zoomable: $scope.value.zoomable
                    };
                    editorService.close();
                },
                close: function () {
                    editorService.close();
                }
            });
        };

The dialog on the row-setting is opened by Umbraco.

It seems to me that the mediaPicker dialog replaces the dialog for row-settings in the grid. I could not find any documentation about this. Is someone experiencing the same issues?

edit: it looks like the click you see in the gif when the media picker is opened and everything has a blur, is causing the unerlaying dialog to close when I click the blur away.

edit2: When you open another dialog, Umbraco renders a second div with class "umb-overlay-backdrop". This overlay renders in front of the media picker, which will make it unclickable. I hacked the backdrop to never show, which fixes the issue, but is not the solution.

.umb-overlay-backdrop { display: none !important; }