Fix clear button behavior in Date/Picker.ts
authorTim Düsterhus <duesterhus@woltlab.com>
Thu, 11 Mar 2021 09:53:41 +0000 (10:53 +0100)
committerTim Düsterhus <duesterhus@woltlab.com>
Thu, 11 Mar 2021 09:56:06 +0000 (10:56 +0100)
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

ts/WoltLabSuite/Core/Date/Picker.ts
wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js

index b593e9c16c74c70cfe7710bed191c554ab940514..0d7384b448883dba904c27eb0293dd4c44ea7370 100644 (file)
@@ -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);
           }
         }
 
index 2e09cb51337f19e670edbc37e36a8065baabc689..ba1f6d289aff7d7a2dfb649c505b9d189e33c43b 100644 (file)
@@ -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'