Jira Custom Field Select2 problems

[Alex Bosatski]

Hello!
I try to add a new custom field to Jira Issues. And I’ve faced few problems.

1. JS code of Select2 becomes available and works only by inserting script below in a velocity edit file. 
   $webResourceManager.requireResource("com.atlassian.auiplugin:aui-select2")
    and other similar methods doesn’t work. Why? How I can fix it?
   

   <script type="text/javascript"> 
     AJS.toInit(function () { 
     AJS.$("#$customField.id").auiSelect2(); 
   });
   </script>

2. If I use script above, custom field with Select2 will mostly work correct. But in Issue Screen when I try to add my field by menu “Admin->Add field”, bottom “Submit” will change design and won’t be work. You can see a screen below. Field will not added. What’s the problem?
   

My edit velocity file code:

#disable_html_escaping() 
#controlHeader ($action $customField.id $customField.name $fieldLayoutItem.required $displayParameters.noHeader) 
<form class="aui" style="width: available"> 
 <script type="text/javascript"> 
   AJS.toInit(function () { 
    AJS.$("#$customField.id").auiSelect2(); 
   }); 
 </script> 
 <select class="js-example-placeholder-single js-states form-control" name="$customField.id" id="$customField.id" style="width: inherit"> 
   <option></option> 
   #foreach ($option in $options) 
     <option value="$option">$option</option> 
   #end 
 </select> 
</form> 
#controlFooter ($action $fieldLayoutItem.fieldDescription $displayParameters.noHeader)

 My atlassian-plugin.xml web-resource dependencies:

<web-resource key="aui-fields-resources" name="aui-fields Web Resources"> 
  <dependency>com.atlassian.auiplugin:ajs</dependency> 
  <dependency>com.atlassian.auiplugin:jquery</dependency> 
  <dependency>com.atlassian.auiplugin:jquery-ui-other</dependency> 
  <dependency>com.atlassian.auiplugin:aui-select2</dependency> 
  <context>atl.general</context> 
  <context>atl.admin</context> 
  <resource type="download" name="aui-fields.css" location="/css/aui-fields.css"/> 
  <resource type="download" name="aui-fields-js.js" location="/js/aui-fields-js.js"/> 
  <resource type="download" name="images/" location="/images"/> 
  <context>aui-fields</context> 
</web-resource>

Jira v.8.19.1 (Server), Atlassian SDK v.8.2.7

[Alex Bosatski]

I solved both issues.
If somebody have a same problem, you'll read a text below.

1. Use this tutorial. Since JIRA 5.0 WebResourceManager is no longer supported.

2. I removed <form></form> wrapper and the button started working.

[Ignat]

Hi Alex.

I'm trying to use this solution but my field does not pick any options.

could you share the final versions of your js and vm files?

[Ignat]

the solution was to use for multiselectCF

#foreach( $option in $configs.options )

instead of 

#foreach ($option in $options) 

btw i've added some check for disabled options/ complete template looks like

#disable_html_escaping()
#customControlHeader ($action $customField.id $customField.name
$fieldLayoutItem.required $displayParameters $auiparams)
<script type="text/javascript">
  AJS.toInit(function () {
     AJS.$("#$customField.id").auiSelect2();
  });
</script>
<select class="js-example-placeholder-single js-states form-control" id="$customField.id"
multiple="multiple" name="$customField.id">

    <option></option>
    #foreach( $option in $configs.options ) )
        #if (!$option.disabled || $option.disabled == false) ||
        ($value && $value.contains($option.optionId.toString())))
             <option value="$option.optionId"
                #if ($value && $value.contains($option.optionId.toString()))
                   selected="selected"
                #end
             >$cfValueEncoder.encodeForHtml($option.value)</option>
        #end
    #end
</select>
#customControlFooter ($action $customField.id $fieldLayoutItem.fieldDescription $displayParameters $auiparams)