Detect changes to the HEX value using the `input` event

The `keypress` event does not fire while making changes to some parts of the value. This becomes an issue when the dialog is submitted through the enter key without a blur happening.

See https://www.woltlab.com/community/thread/296596-farbw%C3%A4hler-durch-enter-speichert-den-wert-nicht/

diff --git a/ts/WoltLabSuite/Core/Ui/Color/Picker.ts b/ts/WoltLabSuite/Core/Ui/Color/Picker.ts
index b5b14034d5098ed8f9b0042b097695059cd422f9..64b4de7dcb4794682ffef8c3d6ab16a358026f95 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Color/Picker.ts
+++ b/ts/WoltLabSuite/Core/Ui/Color/Picker.ts
@@ -172,7 +172,7 @@ class UiColorPicker implements DialogCallbackObject {
 
           this.colorTextInput = content.querySelector("input[type=text]") as HTMLInputElement;
           this.colorTextInput.addEventListener("blur", (ev) => this.updateColorFromHex(ev));
-          this.colorTextInput.addEventListener("keypress", (ev) => this.updateColorFromHex(ev));
+          this.colorTextInput.addEventListener("input", (ev) => this.updateColorFromHex(ev));
 
           if (ColorUtil.isValidColor(this.input.value)) {
             this.setInitialColor(this.input.value);

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js
index 58c7e985994219443637f4a1e4ee529daaac0f81..e1ffa72a571fe091612ef3cc7d5ed628420492ec 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js
@@ -124,7 +124,7 @@ define(["require", "exports", "tslib", "../../Core", "../Dialog", "../../Dom/Uti
                         this.oldColor = content.querySelector(".colorPickerColorOld > span");
                         this.colorTextInput = content.querySelector("input[type=text]");
                         this.colorTextInput.addEventListener("blur", (ev) => this.updateColorFromHex(ev));
-                        this.colorTextInput.addEventListener("keypress", (ev) => this.updateColorFromHex(ev));
+                        this.colorTextInput.addEventListener("input", (ev) => this.updateColorFromHex(ev));
                         if (ColorUtil.isValidColor(this.input.value)) {
                             this.setInitialColor(this.input.value);
                         }