AUI Dialog 2 modal problems - with select 2 user-search and modal does not lock keyboard

Hi there,

once more struggeling with the AUI, perhaps once more using this elements not in the wright way, anyhow the idea was to use the dialog 2 as kind of modal dialog / lightbox. So on the main page there should be several buttons invoking different dialogs 2 which hosts different stuff eg. adding users to a group aso. Everything resides in a custom confluence server plugin, where i’ve implemetet a custom action rendering stuff.

so far i’ve got 2 different problems:

  1. data-aui-modal=“true” but if the focus is getting lost by an element which resides in the dialog 2, the keyboard is not getting locked - so a “c” leads to creating a new page - not funny!

  2. in one of these dialog 2 i’ve copied the user-search. As soon as i cancel a search or click on the select2 after it was closed the search-field freezes and cant get the focus any more. If i manually click on the body of the dialog 2 the select2 looses the focus and if i once more click on the select2 the search field is once more accessible.

Anyone experienced the same problems? Thinking about switching ui-framework…

Here the velocity-scetch (uncommented the validation stuff, but the effect was the same), the content is added via ajax/js:

<section role="dialog" id="gruppe-members-dlg" class="aui-layer aui-dialog2 aui-dialog2-xlarge" aria-hidden="true" data-aui-modal="true" data-aui-focus-selector="#gruppe-members-dlg-close-button">
        <header class="aui-dialog2-header">
            <h2 class="aui-dialog2-header-main">Mitglieder der Gruppe <strong><span id="gruppe-members-dlg-header-placeholder01"></span></strong> verwalten</h2>
        </header>
        <div class="aui-dialog2-content">
            <span id="gruppe-members-dlg-msg"></span>
            <p>Hier können Sie nach Personen suchen und diese zur Gruppe hinzufügen. Bestehende Gruppenmitglieder können aus der Gruppe entfernt werden. Auf Gruppen können später Berechtigungen wie zB.: Lese- und Schreibberechtigungen vergeben werden. Wurde einer Gruppe eine Leseberechtigung vergeben, so haben automatisch aller Mitglieder dieser Gruppe dieselbe Berechtigung.</p>
            <form id="edit-group-membership-form" class="aui space-request-form plus-form" action="#" method="GET">
                <fieldset>                   
<!--                     <input id="gruppe-members-dlg-person-search" name="gruppe-members-dlg-person-search" class="autocomplete-user autocomplete-field text long-field select2-personensuche" data-none-message='Keinen Treffer gefunden' data-dropdown-target="#users-to-add-autocomplete-dd" data-resize-to-input="true" data-autocomplete-user-or-group-bound="true" autocomplete="off" data-cip-id="users-to-add-autocomplete" data-last-search="" required="required" data-aui-validation-required-msg='Geben Sie einen Namen ein.' data-aui-validation-field>
 -->                    <input id="gruppe-members-dlg-person-search" name="gruppe-members-dlg-person-search" class="autocomplete-user autocomplete-field text long-field select2-personensuche" data-none-message='Keinen Treffer gefunden' data-dropdown-target="#users-to-add-autocomplete-dd" data-resize-to-input="true" data-autocomplete-user-or-group-bound="true" autocomplete="off" data-cip-id="users-to-add-autocomplete" data-last-search="">
                    <button id="gruppe-members-dlg-add-member" class="aui-button" type="submit" aria-controls="bereichsverwalter-hinzufuegen-max3-msg">hinzufügen</button>            
                </fieldset>
            </form>
            <div id="gruppe-members-dlg-table-container"></div>
        </div>
        <footer class="aui-dialog2-footer">
            <div class="aui-dialog2-footer-actions">
                <button id="gruppe-members-dlg-close-button" class="aui-button aui-button-primary">Schließen</button>
            </div>
            <div class="aui-dialog2-footer-hint">Zurück zur Benutzergruppen-Administration</div>
        </footer>
    </section>

here is the scetch of the js i’m using in order to copy the search-user functionality:

var avatarWithNameEx = function(opt_data, opt_ignored) {
                return '' + aui.avatar.avatar({ size: opt_data.size, avatarImageUrl: opt_data.avatarImageUrl, accessibilityText: opt_data.displayName, title: opt_data.displayName, extraAttributes: { 'data-username': opt_data.userId } }) + soy.$$escapeHtml(opt_data.displayName);
            };

            AJS.$("input.select2-personensuche").auiSelect2({
                allowClear: true,
                maximumSelectionLength: 1,
                minimumInputLength: 3,
                placeholder: "Person wählen",
                ajax: {
                    url: AJS.contextPath() + "/rest/prototype/1/search/user.json",
                    dataType: 'json',
                    quietMillis: 300,
                    data: _options.personensucheAjaxDataFunction,
                    results: function(data) {
                        return {
                            results: $.map(data.result, function(item) {
                                return {
                                    id: item.username,
                                    text: item.title,
                                    imgSrc: item.thumbnailLink.href,
                                    entity: item
                                }
                            })
                        };
                    },
                    cache: true
                }, // ajax
                formatResult: function(result, a, confluenceObj) {
                    return avatarWithNameEx({
                        size: "small",
                        displayName: result.text,
                        userId: result.id,
                        avatarImageUrl: result.imgSrc
                    });
                },
                formatSelection: function(result, a, confluenceObj) {
                    return avatarWithNameEx({
                        size: "xsmall",
                        displayName: result.text,
                        userId: result.id,
                        avatarImageUrl: result.imgSrc
                    });
                },
                escapeMarkup: function(m) { return m; }, // we do not want to escape markup since we are displaying html in results
                dropdownCssClass: "users-dropdown",
                containerCssClass: "users-autocomplete",
                hasAvatar: true
            });

any hints on that?
regards!

seems i can hack arround the problem 2) by setting tabindes to -1 for the rest of elements except the input i want to focus - when i close the select2 i would have do some cleaning up…here the first idea/sketch

$("#gruppe-members-dlg-person-search").on("select2-open", function() { 
	$("[tabindex=0]").attr("tabindex","-1");
	$("div.select2-search input.select2-input").attr("tabindex",  "0").focus();
});

for the problem 1) i’ll give it a try capturing keyboard input to the “modal” dialog…

regards.