Control the closeOnEscape Dialog in a webItem dialog

Jira Development Jira Cloud
, , ,
1

Hello,

We are developing a hybrid app using Forge and Connect, and have added a webItem in the Connect atlassian-connect.json. This webItem is located in the issue navigator and opens a Dialog where our application runs.

However, we are encountering a problem: pressing the Escape key closes the Dialog entirely. We believe this is the default behaviour, but we would like to be able to control it. We have tried setting the closeOnEscape option to false in the dialog settings, but it did not work.

Is there any way to control this behaviour?

Thank you very much.
Best regards,
David

2 Likes
2

Hi @david.gonzalez,
Have you tried this in a regular Connect app to check whether the fact the app is on Forge has anything to do with it?

3

And would you mind including a snippet of the relevant parts of the descriptor and javascript code to aid in reproducing this?

4

Are you handling the “close” event? Dialog

5

Hi,

Yes, we have tried this in a regular Connect app, and unfortunately, we are experiencing the same result. We have also tested all the available options for AP.dialog in the descriptor, but nothing has worked so far. Additionally, we attempted to detect when the Escape key is pressed using JavaScript, but the iframe closes immediately, and we are unable to intervene.

Of course, here is the snippet of our code in atlassian-connect.json:

         "webItems": [
            {
                "url": "/views/exportation-view",
                "location": "jira.navigator.pluggable.items",
                "weight": 10,
                "key": "exporter-dashboard-top-menu-item",
                "name": {
                    "value": "Exporter"
                },
                "tooltip": {
                    "value": "Exporter"
                },
                "icon": {
                    "width": 16,
                    "height": 16,
                    "url": "public/img/icon/logo.svg"
                },
                "target": {
                    "type": "dialog",
                    "options": {
                        "chrome": false,
                        "height": "500px",
                        "width": "400px"
                    }
                }
            }
         ],
        "dialogs": []

And this is the snippet of forge application:


connectModules:
  jira:webItems:
    - url: /views/exportation-view
      location: jira.navigator.pluggable.items
      weight: 10
      key: exporter-dashboard-top-menu-item
      name:
        value: Exporter
      tooltip:
        value: Exporter
      icon:
        width: 16
        height: 16
        url: img/icon/logo.svg
      target:
        type: dialog
        options:
          chrome: false
          height: 500px
          width: 1600px
  jira:dialogs: [ ]

Thank you!

6

I have used the AP.dialog in a Confluence app and there the closeOnEscape works. I assume that the AP library is more or less the same in Jira and Confluence Connect apps, so it should also work in your case.

There is, however, one thing you have to be aware of. When the dialog is opened, its iframe doesn’t get the keyboard focus automatically. This means when you press the ESC key, the event will be created in the top frame. Confluence and Jira probably define an event listener to close the current dialog on ESC. The closeOnEscape setting only operates in the iframe context. When it is set to true, the AP library will add an key event listener inside the iframe to close the dialog on ESC. To fix your issue you’ll have to move the keyboard focus to your dialog iframe for example with window.focus().

1 Like
7

In our case, we do not launch the Dialog from the jira AP object, but it is loaded from the webItem when we click on the it. This webItem is located in the apps menu of the issue navigator.

I tried the window.focus() because we don’t tested before, but It doesn’t work.

8

If you’re launching the dialog from the web item rather than launching using AP, in the dialog iframe add a keydown handler for ‘Escape’ to the document object with a stopPropagation call, so the event doesn’t bubble to the existing handler in the Confluence code

9

I also happen to open a dialog from a menu item configured in atlassian-connect.json in which there is no option to disable closing on Escape.

Using the ideas mentioned before I was able to prevent closing on Esc like so:

<head>
    <title>...</title>
    <meta name="..." content="..." />
    <script src="https://connect-cdn.atl-paas.net/all.js" defer></script>
    <script>
        window.addEventListener('keydown', function preventAtlassianDialogToCloseOnEsc(event) {
            if (event.code === 'Escape' && event.currentTarget === window) {
                event.stopImmediatePropagation();
            }
        });
        window.addEventListener("visibilitychange", function restoreFocusOnTabSwitch() {
            window.focus();
        });
        window.focus();
    </script>
</head>

The script resides in the index.html’s <head> returned by our server that Jira calls before opening the dialog. It is important this script executes early so that other event handlers, e.g. select dropdowns attached later would still receive the Esc keypress. The window inside the dialog must also receive focus otherwise this handler would not trigger.