Bug with having two AUI dialog2s opened?

I’m working on a plugin that opens a Dialog2 window on top of the usual create issue modal window so basically for a moment we end up with two Dialog2 modals on same page.
First being the one from the “create task” and second the one triggered by me on a button click. Problem is that when my Dialog2 modal is .hide() then the “dar grey” backdrop of the create issue modal is also removed.

Is there any way to be able to have two Dialog2 modals opened and working (being able to close the without affecting the other) on the same page?

Basically looks like there’s only one aui-blanket created een if we have two dialog2s created, and when the top most gets closed then it removes the blacket and the dialog2 from below remains withouth a blanket.

1 Like

I have only done this by rendering content within a single dialog, never using multiple. Sometimes I use AUI Tabs to drive that.

1 Like

Unfortunately I can’t use a tab. It’s a functionality that triggers from the “create issue” dialog and that needs to display additional info for some items “injected” in this dialog. The content to be displayed is too large for a tooltip, or inline-dialog, so another modal was the best option.

Is there anyway I can open a bug on this? Where?

1 Like

Hi @DanielAnechitoaie :slight_smile: Sorry for the late reply - I reported this issue in our backlog for you: https://ecosystem.atlassian.net/browse/AUI-5268

We will take a look at it. Please make sure I phrased it correctly - you can put a comment there too.

Awesome. Yes, was phrased correctly. Thank you for reporting it.

Can you specify which version of AUI you use? We have a test page with stacked dialogs and they seems to work find in our case:

https://master--testpreview-aui-flatapp.netlify.app/dialog2/ (second example on that page looks like what you ask for here)

I have this in my pom.xml file <jira.version>8.7.1</jira.version> so whatever version is bundled with this version of Jira.

If I type AJS.version in browser dev tools console I get 8.6.0 Is this the AUI version as well? Or how can I check?

If this is fixed in current version of AUI then I guess I’ll just have to wait for Jira to update its AUI.

1 Like

This is all we need for now, thank you :slight_smile:

Sadly - I cannot reproduce this behaviour with AUI 8.6.0.

Are you sure you are closing the top-most dialog - not the bottom one in your script? We do not support the case where there are 2 dialogs stacked and you try to close the bottom one.

Are you able to provide the codepen example which reproduces this behavior?

This is my code, the way that I trigger it from JS:

const dlg = dialog2(JIRA.Templates.Plugins.MyPlugin.SomeName.render());

dlg.on("show", (eDlg) => {
    $(eDlg.currentTarget)
        .find("footer button")
        .on("click", (eBtn) => {
            eBtn.preventDefault();
            dlg.hide();
        });
});

dlg.show();

And this is the soy template returned by JIRA.Templates.Plugins.MyPlugin.SomeName.render()

/**
 * render
 */
{template .render}
    <section role="dialog" class="aui-layer aui-dialog2 aui-dialog2-large" data-aui-remove-on-hide="true" data-aui-modal="true" role="dialog">
        <header class="aui-dialog2-header">
            <h2 class="aui-dialog2-header-main">
               ...
            </h2>
        </header>
        <div class="aui-dialog2-content">
            ...
        </div>
        <footer class="aui-dialog2-footer">
            <div class="aui-dialog2-footer-actions">
                <button type="button" class="aui-button aui-button-primary">Close</button>
            </div>
        </footer>
    </section>
{/template}

And I trigger this when a button (that I “injected” into the Create Issue dialog) is clicked.

So maybe the bug is from how Jira uses/makes the “create issue modal?”

Here’s a screen recording https://www.youtube.com/watch?v=BwZ0dy0mnoU (give it a few minutes for youtube to make available the HD version - now seems to be just in 320p - but still visible)

1 Like

I will try to reproduce that behaviour tomorrow - thank you for all the details :slight_smile:

2 Likes

It looks like the whole problem here is caused by the way the “Create Issue” dialog is constructed in Jira. I’m in contact with the Jira team to clarify that.

1 Like

@DanielAnechitoaie I have some bad and some good news for you here.

Bad: The thing you are trying to achieve is not possible/supported right now.
Good: Jira team knows about the issue and there is some work in progress towards better alignment of Jira Dialog and Dialog2 component from AUI.

As @sfbehnke said there are some workarounds if you consider changing the UI pattern to use here (eg. tabs, inline panel etc.)

I will create an official issue in the Jira team’s backlog and notify you once the AUI Dialog2 and Jira Dialog can live together on the same page in peace :wink:

UPDATE: this issue is created

1 Like

For now my “workaround” is to use data-aui-blanketed="false" for my dialog. Doesn’t look as nice but it works and doesn’t seem to be causing issues. It will work for now until the issue is fixed in Jira and then I’ll remove data-aui-blanketed="false" and let it work the way it should.

Thank you for the help, update and creating the issue in Jira’s backlog.

2 Likes