Problem with nested modals when using Forge module's issue navigator action

Hi!

We are migrating our frontend from Connect app’s issue navigator module to the new Forge jira:issueNavigatorAction module.

During our migration process from Connect to Forge, we’ve encountered an issue with modal rendering in the Issue navigator. Currently, we must maintain a Connect implementation solely for this feature, as it’s the only way we’ve found to properly render our modal. We’d like to complete our migration to Forge, but the new module is causing problems with modal display.

Specifically, our Atlaskit modal is being rendered inside another modal, creating an undesired nested modal effect.

This is how the modal should render (current Connect module):

This is what happens with the new Forge module:

Configuration options tried:

1. Using actionType: modal (default):

Result: Creates an unwanted nested modal effect - our Atlaskit modal appears inside the Forge modal.

Example: actionType: modal, viewportSize: large

2. Using actionType: dynamic:

We’ve explored both available UI approaches:

  1. UI Kit: Not viable as it would require complete application rewrite (we use Atlaskit + HTML + styled components)

  2. Custom UI with Bridge Modal API: Creates two separate modals - the Bridge modal and our Atlaskit modal

Example: actionType: modal, Bridge modal size: max

Expected Behavior

We need a solution similar to the previous Connect app behavior, where we get:

  • A single modal container

  • Ability to render our content directly without nesting

  • Control over the modal’s presentation (no external modal affecting our margins/layout)

Question

Is there a way to achieve a single-modal implementation using Forge, similar to how it worked in Connect? Specifically:

  1. Can we remove the external modal container?

Any guidance or alternative approaches would be greatly appreciated.


Environment:

  • App Type: Forge

  • Module: Jira issue navigator action

  • UI Framework: Atlaskit + styled components

Would be happy to provide any additional information needed.

Thank you so much.

Diana.

Holla, btw nice work with being that detailed lol. Now since Forge’s jira:issueNavigatorAction module inherently wraps actions in a modal, it’s causing the unwanted nesting when you try to render your own Atlaskit modal inside it.

To avoid this, instead of using actionType: modal, I’d recommend using actionType: dynamic with Custom UI and controlling the modal entirely within your React code. By using the Forge Bridge Modal API, you can bypass Forge’s built-in modal and directly render your Atlaskit modal at the desired size and style. If you haven’t already, try calling ModalDialog from Atlaskit inside your Custom UI without triggering Forge’s modal.

Alternatively, if UI Kit isn’t an option, you can use Custom UI with the “Fullscreen” viewport and manually position your modal-like UI without relying on Forge’s modal system.

For further details, check these resources:
:small_blue_diamond: Forge Modal API
:small_blue_diamond: Custom UI Bridge
:small_blue_diamond: Jira Issue Navigator Action Module

Hope this is helpful DIana :slight_smile:

Hi there!

Thank you so much for your quick response!

I’ll try out your suggestions. While some points aren’t entirely clear to me yet, I’ll review them alongside the code to better understand the implementation.

Thanks again for your help. :slight_smile:

Hi @dianaaceves!

I’d suggest going with a actionType: dynamic UI Kit component where possible because it allows registering custom modal controls that are properly positioned, which results in the best UX. If that’s not possible e.g. because of the (temporary) missing features in UI Kit, I have created an example app snipped and recoded a Loom explaining how to render Custom UI inside the UI Kit Modal:

The app itself won’t be working out of the box when you run forge register, because it misses a few files, but the code is working fine and you may just copy/paste it into your app.

What it does/can do:

  1. Defines a resource that conditionally renders the modal contents based on the context, so when it is used by the global/project of any other module, it can be rendered as a regular Atlaskit modal, but if it is rendered by the issue navigator action one, only its contents is rendered.
  2. Renders the mentioned above resource inside the Modal body utilizing the Frame component.
  3. Communicates to the Custom UI from UI Kit to perform the action on action button click.
  4. Automatically resizes the modal height based on the Frame height.
  5. Can programmatically change modal size, see docs.

A few screenshots showcasing how it looks:

Hope this helps!

Thanks,
Vitalii