From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 23 Jul 2019 09:44:31 +0000 (+0200)
Subject: Hide the fake hover state for upload buttons
X-Git-Tag: 5.2.0_Alpha_3~16
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=4de6f18efaed059df1f6662bbe3a65862119c55b;p=GitHub%2FWoltLab%2FWCF.git

Hide the fake hover state for upload buttons

The fake hover state conflicts with the file dialog, which does not blur the input field, causing the button to be visually stuck in the hover state.

This change still renders the focus style when the dialog is opened via keyboard navigation.
---

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 00459c5a60..ed50680e94 100755
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -5978,7 +5978,11 @@ if (COMPILER_TARGET_DEFAULT) {
 				elAttr($button[0], 'role', 'button');
 				$button.prepend(this._fileUpload);
 				
-				this._fileUpload[0].addEventListener('focus', function() { $button[0].classList.add('active'); });
+				this._fileUpload[0].addEventListener('focus', function() {
+					if (this.classList.contains('focus-visible')) {
+						$button[0].classList.add('active');
+					}
+				});
 				this._fileUpload[0].addEventListener('blur', function() { $button[0].classList.remove('active'); });
 			}
 			else {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Upload.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Upload.js
index d4649133fc..320f78c2d5 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Upload.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Upload.js
@@ -94,7 +94,11 @@ define(['AjaxRequest', 'Core', 'Dom/ChangeListener', 'Language', 'Dom/Util', 'Do
 			this._button.className = 'button uploadButton';
 			elAttr(this._button, 'role', 'button');
 
-			this._fileUpload.addEventListener('focus', (function() { this._button.classList.add('active'); }).bind(this));
+			this._fileUpload.addEventListener('focus', (function() {
+				if (this._fileUpload.classList.contains('focus-visible')) {
+					this._button.classList.add('active');
+				}
+			}).bind(this));
 			this._fileUpload.addEventListener('blur', (function() { this._button.classList.remove('active'); }).bind(this));
 			
 			var span = elCreate('span');