Select2 in Dialog2 not working correct when removing search from demo

Carsten Hilber August 2, 2015

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

4 answers

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

2 votes
Lennart Goedhart October 6, 2015

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:

&lt;form class="aui"&gt;
	&lt;!-- hidden input is a hack to make focus on the search field work correctly in Chrome --&gt;
	&lt;input class="hidden"&gt;
    &lt;select id="select2-example" multiple=""&gt;
        &lt;option value="CONF"&gt;Confluence&lt;/option&gt;
        &lt;option value="JIRA"&gt;JIRA&lt;/option&gt;
        &lt;option value="BAM"&gt;Bamboo&lt;/option&gt;
        &lt;option value="JAG"&gt;JIRA Agile&lt;/option&gt;
        &lt;option value="CAP"&gt;JIRA Capture&lt;/option&gt;
        &lt;option value="AUI"&gt;AUI&lt;/option&gt;
    &lt;/select&gt;
&lt;/form&gt;
0 votes
Nader Hadji Ghanbari November 24, 2015

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)

0 votes
Carsten Hilber August 2, 2015

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.

 

 

Volodymyr Krupach
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 3, 2015

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.

Carsten Hilber August 10, 2015

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...

Volodymyr Krupach
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 10, 2015

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.

0 votes
Volodymyr Krupach
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 2, 2015

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

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

TAGS
AUG Leaders

Atlassian Community Events