dialog2 + aui-select, problem with aria-hidde Edited

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:

showlog.png

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,

3 answers

Hi @Hao,

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

Hi @Chris "Daz" Darroch, 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,

0 vote

Hi @Chris "Daz" Darroch

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.

0 vote

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

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Published Monday in Jira Software

How large do you think Jira Software can grow?

Hi Atlassian Community! My name is Shana, and I’m on the Jira Software team. One of the many reasons this Community exists is to connect you to others on similar product journeys or with comparabl...

688 views 6 13
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you