Converting a text field to dropdown in Property Pane

Flowable Application
1

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

servicetaskclass-property-write-template.html:

<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>
</select>
</div>

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

properties-servicetaskclass-controller.js:

angular
.module(‘flowableModeler’)
.controller(‘FlowableServiceTaskClassCtrl’, [ ‘$scope’, function($scope) {
if ($scope.property.value == undefined && $scope.property.value == null)
{
$scope.property.value = ‘’;
}
$scope.serviceTaskClassChanged = function() {
$scope.updatePropertyInModel($scope.property);
};
}]);

  • 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?