Fixed focus handling in suggestions
authorMarcel Werk <burntime@woltlab.com>
Sun, 10 Mar 2019 19:36:44 +0000 (20:36 +0100)
committerMarcel Werk <burntime@woltlab.com>
Sun, 10 Mar 2019 19:36:44 +0000 (20:36 +0100)
wcfsetup/install/files/js/WCF.js
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Input.js

index ee3d413abdd63d36df7bc4ff1aec15b443318faf..db0144215cc3d01cb7b5d4574466511279f2ca2e 100755 (executable)
@@ -878,9 +878,10 @@ WCF.Dropdown = {
         * Toggles a dropdown.
         * 
         * @param       string          containerID
+        * @param       {boolean=}      disableAutoFocus
         */
-       toggleDropdown: function(containerID) {
-               window.bc_wcfSimpleDropdown._toggle(null, containerID);
+       toggleDropdown: function(containerID, disableAutoFocus) {
+               window.bc_wcfSimpleDropdown._toggle(null, containerID, null, disableAutoFocus);
        },
        
        /**
@@ -4464,7 +4465,7 @@ WCF.Search.Base = Class.extend({
                
                var $containerID = this._searchInput.parents('.dropdown').wcfIdentify();
                if (!WCF.Dropdown.getDropdownMenu($containerID).hasClass('dropdownOpen')) {
-                       WCF.Dropdown.toggleDropdown($containerID);
+                       WCF.Dropdown.toggleDropdown($containerID, true);
                        
                        this._openDropdown();
                }
index f8941e8d65ec532bb8f758e2cff19331ba6a177b..2256c2d80dedd885671739d31212870a9f05838b 100644 (file)
@@ -185,9 +185,10 @@ define(
                 * 
                 * @param       {string}        containerId             dropdown wrapper id
                 * @param       {Element=}      referenceElement        alternative reference element, used for reusable dropdown menus
+                * @param       {boolean=}      disableAutoFocus
                 */
-               toggleDropdown: function(containerId, referenceElement) {
-                       this._toggle(null, containerId, referenceElement);
+               toggleDropdown: function(containerId, referenceElement, disableAutoFocus) {
+                       this._toggle(null, containerId, referenceElement, disableAutoFocus);
                },
                
                /**
@@ -245,11 +246,12 @@ define(
                 * Opens the dropdown unless it is already open.
                 * 
                 * @param       {string}        containerId     dropdown wrapper id
+                * @param       {boolean=}      disableAutoFocus
                 */
-               open: function(containerId) {
+               open: function(containerId, disableAutoFocus) {
                        var menu = _menus.get(containerId);
                        if (menu !== undefined && !menu.classList.contains('dropdownOpen')) {
-                               this.toggleDropdown(containerId);
+                               this.toggleDropdown(containerId, undefined, disableAutoFocus);
                        }
                },
                
@@ -379,9 +381,10 @@ define(
                 * @param       {?Event}        event                   event object, should be 'null' if targetId is given
                 * @param       {string?}       targetId                dropdown wrapper id
                 * @param       {Element=}      alternateElement        alternative reference element for alignment
+                * @param       {boolean=}      disableAutoFocus
                 * @return      {boolean}       'false' if event is not null
                 */
-               _toggle: function(event, targetId, alternateElement) {
+               _toggle: function(event, targetId, alternateElement, disableAutoFocus) {
                        if (event !== null) {
                                event.preventDefault();
                                event.stopPropagation();
@@ -479,20 +482,22 @@ define(
                                        
                                        this._notifyCallbacks(containerId, 'open');
                                        
-                                       elAttr(menu, 'role', 'menu');
-                                       elAttr(menu, 'tabindex', -1);
-                                       menu.removeEventListener('keydown', _callbackDropdownMenuKeyDown);
-                                       menu.addEventListener('keydown', _callbackDropdownMenuKeyDown);
-                                       var firstListItem = null;
-                                       elBySelAll('li', menu, function(listItem) {
-                                               if (firstListItem === null) firstListItem = listItem;
-                                               else if (listItem.classList.contains('active')) firstListItem = listItem;
-                                               
-                                               elAttr(listItem, 'role', 'menuitem');
-                                               elAttr(listItem, 'tabindex', -1);
-                                       });
-                                       if (firstListItem !== null) {
-                                               firstListItem.focus();
+                                       if (!disableAutoFocus) {
+                                               elAttr(menu, 'role', 'menu');
+                                               elAttr(menu, 'tabindex', -1);
+                                               menu.removeEventListener('keydown', _callbackDropdownMenuKeyDown);
+                                               menu.addEventListener('keydown', _callbackDropdownMenuKeyDown);
+                                               var firstListItem = null;
+                                               elBySelAll('li', menu, function (listItem) {
+                                                       if (firstListItem === null) firstListItem = listItem;
+                                                       else if (listItem.classList.contains('active')) firstListItem = listItem;
+                                                       
+                                                       elAttr(listItem, 'role', 'menuitem');
+                                                       elAttr(listItem, 'tabindex', -1);
+                                               });
+                                               if (firstListItem !== null) {
+                                                       firstListItem.focus();
+                                               }
                                        }
                                        
                                        this.setAlignment(dropdown, menu, alternateElement);
index 0b493b20b8af35fa9c990d77948a65c568bb75ae..0abfac00d1df1c18fd5f3f08bf358b5cd4b9d046 100644 (file)
@@ -327,7 +327,7 @@ define(['Ajax', 'Core', 'EventKey', 'Dom/Util', 'Ui/SimpleDropdown'], function(A
                                        UiSimpleDropdown.close(this._dropdownContainerId);
                                }
                                else {
-                                       UiSimpleDropdown.open(this._dropdownContainerId);
+                                       UiSimpleDropdown.open(this._dropdownContainerId, true);
                                        
                                        // mark first item as active
                                        if (this._list.childElementCount && ~~elData(this._list.children[0], 'object-id')) {