From 4de6f18efaed059df1f6662bbe3a65862119c55b Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Tue, 23 Jul 2019 11:44:31 +0200 Subject: [PATCH] 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. --- wcfsetup/install/files/js/WCF.js | 6 +++++- wcfsetup/install/files/js/WoltLabSuite/Core/Upload.js | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) 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'); -- 2.20.1