From: Tim Düsterhus Date: Thu, 11 Mar 2021 09:53:41 +0000 (+0100) Subject: Fix clear button behavior in Date/Picker.ts X-Git-Tag: 5.4.0_Alpha_1~175 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=0f152ffb23555343a4e61038c4cf186fb4da3cfd;p=GitHub%2FWoltLab%2FWCF.git Fix clear button behavior in Date/Picker.ts Before the rewrite to TypeScript both buttons used the same variable name (`button`). Apparently during the rewrite they have been mixed up. Use a clear variable name for each to fix the issue. see 9a11d3a3b9959aea13a700fa4b32ec35bdc064f0 Fixes #4061 --- diff --git a/ts/WoltLabSuite/Core/Date/Picker.ts b/ts/WoltLabSuite/Core/Date/Picker.ts index b593e9c16c..0d7384b448 100644 --- a/ts/WoltLabSuite/Core/Date/Picker.ts +++ b/ts/WoltLabSuite/Core/Date/Picker.ts @@ -771,39 +771,39 @@ const DatePicker = { const container = document.createElement("div"); container.className = "inputAddon"; - clearButton = document.createElement("a"); - - clearButton.className = "inputSuffix button jsTooltip"; - clearButton.href = "#"; - clearButton.setAttribute("role", "button"); - clearButton.tabIndex = 0; - clearButton.title = Language.get("wcf.date.datePicker"); - clearButton.setAttribute("aria-label", Language.get("wcf.date.datePicker")); - clearButton.setAttribute("aria-haspopup", "true"); - clearButton.setAttribute("aria-expanded", "false"); - clearButton.addEventListener("click", open); - container.appendChild(clearButton); + const openButton = document.createElement("a"); + + openButton.className = "inputSuffix button jsTooltip"; + openButton.href = "#"; + openButton.setAttribute("role", "button"); + openButton.tabIndex = 0; + openButton.title = Language.get("wcf.date.datePicker"); + openButton.setAttribute("aria-label", Language.get("wcf.date.datePicker")); + openButton.setAttribute("aria-haspopup", "true"); + openButton.setAttribute("aria-expanded", "false"); + openButton.addEventListener("click", open); + container.appendChild(openButton); let icon = document.createElement("span"); icon.className = "icon icon16 fa-calendar"; - clearButton.appendChild(icon); + openButton.appendChild(icon); element.parentNode!.insertBefore(container, element); - container.insertBefore(element, clearButton); + container.insertBefore(element, openButton); if (!disableClear) { - const button = document.createElement("a"); - button.className = "inputSuffix button"; - button.addEventListener("click", () => this.clear(element)); + clearButton = document.createElement("a"); + clearButton.className = "inputSuffix button"; + clearButton.addEventListener("click", () => this.clear(element)); if (isEmpty) { - button.style.setProperty("visibility", "hidden", ""); + clearButton.style.setProperty("visibility", "hidden", ""); } - container.appendChild(button); + container.appendChild(clearButton); icon = document.createElement("span"); icon.className = "icon icon16 fa-times"; - button.appendChild(icon); + clearButton.appendChild(icon); } } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js index 2e09cb5133..ba1f6d289a 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js @@ -642,33 +642,33 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste // create input addon const container = document.createElement("div"); container.className = "inputAddon"; - clearButton = document.createElement("a"); - clearButton.className = "inputSuffix button jsTooltip"; - clearButton.href = "#"; - clearButton.setAttribute("role", "button"); - clearButton.tabIndex = 0; - clearButton.title = Language.get("wcf.date.datePicker"); - clearButton.setAttribute("aria-label", Language.get("wcf.date.datePicker")); - clearButton.setAttribute("aria-haspopup", "true"); - clearButton.setAttribute("aria-expanded", "false"); - clearButton.addEventListener("click", open); - container.appendChild(clearButton); + const openButton = document.createElement("a"); + openButton.className = "inputSuffix button jsTooltip"; + openButton.href = "#"; + openButton.setAttribute("role", "button"); + openButton.tabIndex = 0; + openButton.title = Language.get("wcf.date.datePicker"); + openButton.setAttribute("aria-label", Language.get("wcf.date.datePicker")); + openButton.setAttribute("aria-haspopup", "true"); + openButton.setAttribute("aria-expanded", "false"); + openButton.addEventListener("click", open); + container.appendChild(openButton); let icon = document.createElement("span"); icon.className = "icon icon16 fa-calendar"; - clearButton.appendChild(icon); + openButton.appendChild(icon); element.parentNode.insertBefore(container, element); - container.insertBefore(element, clearButton); + container.insertBefore(element, openButton); if (!disableClear) { - const button = document.createElement("a"); - button.className = "inputSuffix button"; - button.addEventListener("click", () => this.clear(element)); + clearButton = document.createElement("a"); + clearButton.className = "inputSuffix button"; + clearButton.addEventListener("click", () => this.clear(element)); if (isEmpty) { - button.style.setProperty("visibility", "hidden", ""); + clearButton.style.setProperty("visibility", "hidden", ""); } - container.appendChild(button); + container.appendChild(clearButton); icon = document.createElement("span"); icon.className = "icon icon16 fa-times"; - button.appendChild(icon); + clearButton.appendChild(icon); } } // check if the date input has one of the following classes set otherwise default to 'short'