ScriptRunner: Dialog dropdown menu appears top left of screen without rest of dialog

[Matt]

I have below a JIRA endpoint script that displays a dialog on web-item press. The dialog features a dropdown menu, which is not working as expected. I've been following the guidelines on https://docs.atlassian.com/aui/7.9.9/docs/dropdown.html. 

I've no idea why it's misbehaving - any help appreciated! 

Repro:

1 - I navigate to my task which shows the web-item button, and click it.

2 - The dialog appears, and looks as expected. I can select from the dropdown menu correctly, and the press the X top right of the dialog to close.

3 - I then press the web-item button again, and the dialog reappears. It looks as it should.

4 - When I select the dropdown again, the dialog disappears completely, and only the dropdown menu can be seen - which has now moved to the top left of the screen. 

import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate
import groovy.transform.BaseScript
import com.atlassian.jira.component.ComponentAccessor
import javax.ws.rs.core.MediaType
import javax.ws.rs.core.MultivaluedMap
import javax.ws.rs.core.Response
import com.atlassian.jira.config.properties.APKeys
def baseUrl = ComponentAccessor.getApplicationProperties().getString(APKeys.JIRA_BASEURL)

@BaseScript CustomEndpointDelegate delegate

createSubTask { MultivaluedMap queryParams ->

def issueKey = queryParams.getFirst("issueKey") as String

def header = """
<header class="aui-dialog2-header">
<h2 class="aui-dialog2-header-main">Clone ${issueKey} as Sub-Task</h2>
<a class="aui-dialog2-header-close">
<span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
</a>
</header>
"""
def typesOptionsHTML = ""
def allIssueTypes = ComponentAccessor.constantsManager.subTaskIssueTypeObjects.each { type ->
typesOptionsHTML += "<aui-item-radio interactive>${type.name}</aui-item-radio>"
}
def content = """
<div class="aui-dialog2-content">
<p>Select an assignee and issue type for the Sub-Task</p><br> 
<button class="aui-button aui-dropdown2-trigger" aria-controls="types-dropdown">Pick a Sub-Task type</button>
<aui-dropdown-menu id="types-dropdown">
<aui-section label="Sub-Task Types">
${typesOptionsHTML}
</aui-section>
</aui-dropdown-menu>
</div>
"""

def footer = """
<footer class="aui-dialog2-footer">
<div class="aui-dialog2-footer-actions">
<button id="dialog-close-button" class="aui-button aui-button-link">Close</button>
</div>
<div class="aui-dialog2-footer-hint">All issue details will be copied over into the new Sub-Task</div>
</footer>
"""

def dialog = """
<section id="static-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" role="dialog" aria-hidden="true">
${header} 
${content} 
${footer} 
</section> 
"""

Response.ok().type(MediaType.TEXT_HTML).entity(dialog.toString()).build()
}

Also, whenever I paste code into these questions it removes the formatting - how can I preserve my format?