Fixes to Input and CheckBox when updating styles (#101)

* Keep focus on input elements. Call preventDefault() on input events * Fix changing background of Input fields * Fix bug in resetting style on CheckBox --------- Co-authored-by: Dmytro Soldatov <[email protected]>
pixijs · Oct 20, 2023 · 9dcf683 · 9dcf683
1 parent 4b4c9b7
commit 9dcf683
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git a/src/CheckBox.ts b/src/CheckBox.ts
@@ -95,6 +95,9 @@ export class CheckBox extends Switcher
     /** Setter, which sets a checkbox style settings. */
     set style(style: CheckBoxStyle)
     {
+        // Preserve checked state for the end of the method
+        const wasChecked = this.checked;
+
         this._style = style;
 
         const { unchecked, checked } = style;
@@ -110,6 +113,10 @@ export class CheckBox extends Switcher
             this.label.x = uncheckedView.width + 10 + (style.textOffset?.x ?? 0);
             this.label.y = ((uncheckedView.height - this.label.height) / 2) + (style.textOffset?.y ?? 0);
         }
+
+        // Reset checked state
+        delete this._active;
+        this.checked = wasChecked;
     }
 
     /** Getter, which returns a checkbox style settings. */

diff --git a/src/Input.ts b/src/Input.ts
@@ -131,7 +131,7 @@ export class Input extends Container
 
         const defaultTextStyle = {
             fill: 0x000000,
-            align: 'center'
+            align: 'center',
         } as TextStyle;
 
         this.options.textStyle = options.textStyle ?? defaultTextStyle;
@@ -147,7 +147,10 @@ export class Input extends Container
         this._cursor.height = this.inputField.height * 0.8;
         this._cursor.alpha = 0;
 
-        this.placeholder = new Text(options.placeholder, textStyle ?? defaultTextStyle);
+        this.placeholder = new Text(
+            options.placeholder,
+            textStyle ?? defaultTextStyle
+        );
         this.placeholder.visible = !!options.placeholder;
 
         this.addChild(this.inputField, this.placeholder, this._cursor);
@@ -169,7 +172,10 @@ export class Input extends Container
         this._bg.cursor = 'text';
         this._bg.interactive = true;
 
-        this.addChildAt(this._bg, 0);
+        if (!this._bg.parent)
+        {
+            this.addChildAt(this._bg, 0);
+        }
 
         if (!this.inputField)
         {
@@ -212,7 +218,10 @@ export class Input extends Container
             return;
         }
 
-        if (this.options.maxLength && this.value.length >= this.options.maxLength)
+        if (
+            this.options.maxLength
+            && this.value.length >= this.options.maxLength
+        )
         {
             return;
         }
@@ -260,6 +269,11 @@ export class Input extends Container
             this.input.removeEventListener('blur', this.stopEditingBinding);
             this.input.removeEventListener('keyup', this.onKeyUpBinding);
 
+            this._keyboard.oninput = (event) =>
+            {
+              let value = this._keyboard.value;
+            }
+
             this.input?.blur();
             this.input?.remove();
             this.input = null;
@@ -356,11 +370,16 @@ export class Input extends Container
         const align = this.getAlign();
 
         this.inputField.anchor.set(align, 0.5);
-        this.inputField.x = (this._bg.width * align) + (align === 1 ? -this.paddingRight : this.paddingLeft);
-        this.inputField.y = (this._bg.height / 2) + this.paddingTop - this.paddingBottom;
+        this.inputField.x
+            = (this._bg.width * align)
+            + (align === 1 ? -this.paddingRight : this.paddingLeft);
+        this.inputField.y
+            = (this._bg.height / 2) + this.paddingTop - this.paddingBottom;
 
         this.placeholder.anchor.set(align, 0.5);
-        this.placeholder.x = (this._bg.width * align) + (align === 1 ? -this.paddingRight : this.paddingLeft);
+        this.placeholder.x
+            = (this._bg.width * align)
+            + (align === 1 ? -this.paddingRight : this.paddingLeft);
         this.placeholder.y = this._bg.height / 2;
 
         this._cursor.x = this.getCursorPosX();
@@ -471,7 +490,12 @@ export class Input extends Container
     // Return array of paddings [top, right, bottom, left]
     get padding(): [number, number, number, number]
     {
-        return [this.paddingTop, this.paddingRight, this.paddingBottom, this.paddingLeft];
+        return [
+            this.paddingTop,
+            this.paddingRight,
+            this.paddingBottom,
+            this.paddingLeft,
+        ];
     }
 
     override destroy(options?: IDestroyOptions | boolean)