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 00459c5a60c1749dd2a8ea6e38964a79a5166683..ed50680e942df1fe07e18f4433ded8d47b872d20 100755 (executable)
--- 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 d4649133fc1e520a7d76f3f5bda888ff0d8491dd..320f78c2d56990c6241fbcc8f0cb4c38719bc0e8 100644 (file)
--- 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');