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

stefan.baerthlein · October 27, 2017, 11:07am

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:

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

stefan.baerthlein · October 27, 2017, 2:19pm

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.

muschol · October 9, 2024, 7:51am

I know this post is now seven years old but problem 1) is still present in the latest version of AUI.

So even when your modal dialog is open, when the user is not entering text in an “input” element, pressing “e” (for example) puts the page behind the dialog into edit mode.

My solution is to capture the keydown event for the dialog element and then checking where it was triggered from.

AJS.$("#id_of_dialog_element").on('keydown', function(e) {
    if (e.target.id == "id_of_dialog_element") {
        e.preventDefault();
        e.stopImmediatePropagation();
    }
});

The if statement is necessary to ensure that you can still enter text into input elements. If you have other nested elements in your dialog, you will need to add those to the “if” statement. Or you could check the type of the element instead.