Converting a text field to dropdown in Property Pane

Hi, I am currently trying to convert the Delegate Expression property of Service task to a dropdown.
I have followed the below steps:

  • Created HTML file in static\editor-app\configuration\properties


<div ng-controller="FlowableServiceTaskClassCtrl">
<select ng-model="property.value" ng-change="serviceTaskClassChanged()">
<option value="${option1}">Option 1</option>
<option value="${option2}">Option 2</option>
<option value="${option3}">Option 3</option>

  • Created corresponding javascript file in static\editor-app\configuration\


.controller(‘FlowableServiceTaskClassCtrl’, [ ‘$scope’, function($scope) {
if ($ == undefined && $ == null)
$ = ‘’;
$scope.serviceTaskClassChanged = function() {

  • Added a new property in properties.js, included this script in index.html as well

“flowable-servicetaskclass” : {
“readModeTemplateUrl”: “editor-app/configuration/properties/servicetaskclass-property-write-template.html”,
“writeModeTemplateUrl”: “editor-app/configuration/properties/servicetaskclass-property-write-template.html”

  • Used this property as the type for servicetaskdelegateexpressionpackage in stencilset_bpmn.json

“name” : “servicetaskdelegateexpressionpackage”,
“properties” : [ {
“id” : “servicetaskdelegateexpression”,
“type” : “flowable-servicetaskclass”,
“title” : “Delegate expression”,
“value” : “”,
“description” : “Service task logic defined with a delegate expression.”,
“popular” : true,
“refToView” : “servicetaskclass”
} ]

After these steps, the field is converted to dropdown and I’m able to choose options as well. But the problem is if I click on the dropdown for the first time, the dropdown menu disappears after a moment and I have to click on the field again to get the dropdown menu. If I click again, the dropdown menu stays and I’m able to select the option.

Is there anything that I have missed while trying to convert the field to dropdown?