dialog2 + aui-select, problem with aria-hidde

[Chien-Hao Chen]

Hi, I'm trying to use jQuery change event for aui-select, here is my code:

myjiraplugin.vm:

$webResourceManager.requireResource("com.atlassian.auiplugin:dialog2")
$webResourceManager.requireResource("com.atlassian.auiplugin:aui-select")
<script type="text/javascript">
#include("js/myjiraplugin.js")
</script>

<button id="test-button" class="aui-button">Show dialog</button>
<section id="test-dialog" class="aui-dialog2 aui-dialog2-small aui-layer" aria-hidden="true">
    <header class="aui-dialog2-header">
    </header>
    <div class="aui-dialog2-content">
        <form class="aui">
            <aui-select id="test-select" name="test-select" placeholder="Select..">
                <aui-option id="yes">yes</aui-option>
                <aui-option id="no">no</aui-option>
            </aui-select>
        </form>
    </div>
    <footer class="aui-dialog2-footer">
    </footer>
</section>

myjiraplugin.js:

AJS.$(document).ready(function() {
   AJS.$("#test-button").click(function(e) {
      e.preventDefault();
      AJS.dialog2("#test-dialog").show();
   });

   AJS.$("#test-select").change(function(e) {
      console.log(e);
   });
});

 the problem is that console always show 3 times outputs, but the aui-select just has been changed only once:

If I remove aria-hidde attribute from section tag, that will show just one output as normal, but can't get dialog box/popup window effect...

Did I miss something here?

Regards,

[Daz]

From what I can see, this seems to be a bug in Jira. As such, I've raised https://jira.atlassian.com/browse/JRASERVER-66834 and notified the team. I can't guarantee a timeframe for remedying the problem; see here for Atlassian's bug fixing policy: https://confluence.atlassian.com/support/atlassian-bug-fixing-policy-201294573.html

[Krystyna Wojtyna]

Hi @Daz

I have just encountered the triple change event as well.

My example is slightly different, as I'm using the JIRA.FormDialog() for the popup (it's triggered from the menu item in the top nav menu).

But the behaviour is pretty much the same.

 I'm developing in the JIRA 7.5, and have tested it in the Opera beta 51 & Firefox 57.

The same webwork displayed in the separate window instead of the dialog works perfectly fine.

the .vm filter part

<aui-select name="$filter.getKey()" class="filter-select">
 #foreach($option in $filter.getOptions())
 <aui-option value="$option" #if ($filter.isSelected($option)) selected="selected" #end>$option</aui-option>
 #end
</aui-select>

the .js code

AJS.toInit(function () {
 
 JIRA.Dialogs.testDialog = new JIRA.FormDialog({
  id: "test-dialog",
  trigger: "a.test-trigger-dialog",
  widthClass: "large",
  ajaxOptions: JIRA.Dialogs.getDefaultAjaxOptions
 });

 JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context, reason) {
  var testForm = AJS.$("#plugin-form", context);
  var isDialogReady = reason === JIRA.CONTENT_ADDED_REASON.dialogReady;
 
  if (testForm.length > 0 && isDialogReady) {
 
   console.log("attach change event to:");
   console.log(context.find(".filter-select"));

   AJS.$(context.find(".filter-select")).on("change", filterStories);

   function filterStories(e) {
    e.preventDefault();
    console.log('filter changed');
    $form = $(e.target).closest('form');
    if ($form) {
     $form.find('#action').val("filter_stories");
     console.log('should submit');
     // $form.submit();
    }
    return false;
   }
 }
 });
});

I log the  

context.find(".filter-select")

to make sure that there's only one such element, and there is.

Each selection in the dialog fires 3 change events.

Also, if the webwork is presented in the dialog, the change event is also fired when there is a preselected option - it seems that the change event is applied before the aui-select is processed by jira js code causing setting of a selected issue fire the change event as well.

With me trying to make a submit and reload the popup on select change, the popup just falls into the submission loop.

I'm fairly new to Jira development so if there's something I'm doing terribly wrong, don't hesitate to correct me.

[Daz]

Hi @Chien-Hao Chen,

I noticed in your screenshot that the three events that get logged are about 1-2 seconds apart... Are you saying that they are all fired in response to a single user interaction?

I created a reduced test case for this problem, but I cannot seem to reproduce it using only AUI 6.0.0: https://codepen.io/chrisdarroch/pen/RxaxRv

In what browser(s) are you experiencing this problem? Does this problem also occur for you in the test case I provided, or only when testing in Jira? What version of Jira are you testing in?

Cheers,
Daz

[Chien-Hao Chen]

Hi @Daz, thank you so much for responding.

• Are you saying that they are all fired in response to a single user interaction?
  Yes.

• In what browser(s) are you experiencing this problem?  
  Google Chrome Versión 63.0.3239.84 (Build oficial) (64 bits)

• Does this problem also occur for you in the test case I provided, or only when testing in Jira? 
  It's only happening in JIRA, works well in CODEPEN Test...

• What version of Jira are you testing in?
  <jira.version>7.2.2</jira.version>

In this moment, I just use AUI Select2 without applying the multiple="" attribute for instead, and doesn't occurs problem.

Sincerely,