Begin of the insertion# Problem

End of the insertion We are facing some issues with the Primer Dialog which leads us to the question of whether we want to continue using it

Begin of the deletion ### Biggest disadvantages

End of the deletion 1. It is rendered per default in the DOM on page load. A click on the trigger only toggles the visibility. This will cause sooner or later performance problems, especially when we have multiple Dialogs on a page and the forms inside the Dialogs are complex (thinking of the Work Package page) Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion 2. The rendered `top-layer` causes issues with other libraries as `ng-select` or `ckEditor` Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion 1. ##53789 Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion 2. [https://github.com/opf/openproject/pull/14683](https://github.com/opf/openproject/pull/14683) Begin of the insertion


**Biggest advantages:**End of the insertion

Begin of the deletion ### Biggest advantages

End of the deletion 1. It is a native Primer component and maintained as such Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion 1. This also makes it easier to use it inside other Primer components (e.g. the PageHeader) Begin of the insertion


#End of the insertion Begin of the deletion



##End of the deletion Possible solutions

1. Do not use Primer Dialog, but our native Dialogs Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion 2. Change the implementation of Primer Dialogs Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion 3. For each issue, try to find a way around this Begin of the insertion


# Final solution

> It is rendered per default in the DOM on page load. A click on the trigger only toggles the visibility. This will cause sooner or later performance problems, especially when we have multiple Dialogs on a page and the forms inside the Dialogs are complex (thinking of the Work Package page)

* In [https://github.com/opf/openproject/pull/15297](https://github.com/opf/openproject/pull/15297) , we introduced a truly async Dialog which uses a custom turbo\_stream action to render only the trigger button. When that is clicked, the actual Dialog is rendered. When closed, the element is removed from the DOM

* We intercept form submits [here](https://github.com/opf/openproject/pull/15297/files#diff-f82343d9ddca41c343127204e221cfaa30e21103d084528781f5e7c085bc744cR18), to show validation messages in the Dialog if necessary


> The rendered `top-layer` causes issues with other libraries as `ng-select` or `ckEditor`

* For `ng-select` we can use the `appendTo` attribute to render the dropdown inside the top-layer

* For `ckEditor` we introduced a method which re-renders the toolbar inside the top-layer, see [https://github.com/opf/openproject/pull/15277](https://github.com/opf/openproject/pull/15277)

* For `draggable` containers we use the `mirrorContainer` attribute to render the draggable items inside the top-layer, see e.g. [https://github.com/opf/openproject/pull/15274](https://github.com/opf/openproject/pull/15274)End of the insertion