From 7d3f00a7f49bd9481f85a228f4d872ff58022bf1 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Sun, 10 Mar 2019 20:36:44 +0100
Subject: [PATCH] Fixed focus handling in suggestions
---
wcfsetup/install/files/js/WCF.js | 7 +--
.../WoltLabSuite/Core/Ui/Dropdown/Simple.js | 43 +++++++++++--------
.../js/WoltLabSuite/Core/Ui/Search/Input.js | 2 +-
3 files changed, 29 insertions(+), 23 deletions(-)
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index ee3d413abd..db0144215c 100755
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -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();
}
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
index f8941e8d65..2256c2d80d 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Simple.js
@@ -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);
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Input.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Input.js
index 0b493b20b8..0abfac00d1 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Input.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Input.js
@@ -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')) {
--
2.20.1