Hi,
I am using the example from the latest AUI Doc:
https://docs.atlassian.com/aui/latest/docs/dialog2.html
When I nest the select2 example, from
https://docs.atlassian.com/aui/latest/docs/auiselect2.html
everything works as aspected. The only change I made so far was to remove the multitiple="" attribute. And to that point everything is still working. When I remove the input field from the secondary header, the select2 will behave funny, it does not seem to have the focus when you click in it. If you type a character, the focus jumps to the next tab location but the select2 ist still open.
The same thing happens if I disable the input field...
Here's what I did, the only change is the line with the input...
<section role="dialog" id="demo-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true">
<!-- Dialog header -->
<header class="aui-dialog2-header">
<!-- The dialog's title -->
<h2 class="aui-dialog2-header-main">Always use sentence case</h2>
<!-- Actions to render on the right of the header -->
<div class="aui-dialog2-header-secondary">
<form class="aui" action="#">
<!--input id="demo-search" class="text" name="search" type="search"-->
</form>
</div>
<!-- Close icon -->
<a class="aui-dialog2-header-close">
<span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
</a>
</header>
<!-- Main dialog content -->
...
Maybe someone knows why this happens?
Carsten
Community moderators have prevented the ability to post new answers.
Interestingly, this wasn't a problem in Safari or Firefox for me, only in Chrome. After trying a whole bunch of options, my least terrible hack was just to add a hidden <input> above the <select> (or in my case, another <input> - I was loading the data using ajax).
Something like this:
<form class="aui"> <!-- hidden input is a hack to make focus on the search field work correctly in Chrome --> <input class="hidden"> <select id="select2-example" multiple=""> <option value="CONF">Confluence</option> <option value="JIRA">JIRA</option> <option value="BAM">Bamboo</option> <option value="JAG">JIRA Agile</option> <option value="CAP">JIRA Capture</option> <option value="AUI">AUI</option> </select> </form>
We have the same problem in Chrome when we have multiple Select2 components in a Dialog2 it works but when we have only one Select2 we get some weird results (as you mentioned focus will be on the next element automatically when you type into the Select2 element). So far we couldn't find a proper fix for this, we're going to give your workaround a try by putting a dummy hidden input before the Select2)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Volodymyr,
you forgot to activate the select2, add the following line befor calling show() on the dialog:
AJS.$("#select2-example").auiSelect2();
It is reproducable in jsbin.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You are right. Spend some time playing with jsbin and see that the problem is caused by "aui-dialog2" class for section tag: http://jsbin.com/maludaketa/edit?html,js,output You can go deeper and investigate what CSS property is causing the problem.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Volodymyr, just played around a bit, but i don't get any further. Do you know where I can file a bug for this component or AUI? I cant find a project related to aui...
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Carsten, You can file a bug in https://ecosystem.atlassian.net/, project: Atlassian User Interface (AUI) (AUI). Nevertheless I suggest you to find what CSS property from "aui-dialog2" class is creating the problem and just override it. Looks like Atlassian team is overloaded and it takes them months to fix much more serious bugs.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Carsten,
Maybe you put select2 into wrong place. It works fine for me and here is jsbin: http://jsbin.com/lodisubumu/edit?html,js,output
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Community moderators have prevented the ability to post new answers.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.