Input: Changing the background Input lead to strange results. #108 (#109

) * Input: Changing the background Input lead to strange results. #108 * fix issues
pixijs · Oct 20, 2023 · 4b4c9b7 · 4b4c9b7
1 parent 9c483fe
commit 4b4c9b7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/src/Input.ts b/src/Input.ts
@@ -15,6 +15,7 @@ export type InputOptions = {
     maxLength?: number;
     align?: 'left' | 'center' | 'right';
     padding?: Padding;
+    cleanOnFocus?: boolean;
 };
 
 /**
@@ -158,20 +159,31 @@ export class Input extends Container
 
     set bg(bg: Container | string)
     {
+        if (this._bg)
+        {
+            this.removeChild(this._bg);
+            this._bg.destroy();
+        }
+
         this._bg = getView(bg);
         this._bg.cursor = 'text';
         this._bg.interactive = true;
 
-        if (!this._bg.parent)
-        {
-            this.addChild(this._bg);
-        }
+        this.addChildAt(this._bg, 0);
 
         if (!this.inputField)
         {
             this.init();
         }
 
+        if (this.inputMask)
+        {
+            this.inputField.mask = null;
+            this._cursor.mask = null;
+            this.removeChild(this.inputMask);
+            this.inputMask.destroy();
+        }
+
         this.inputMask = new Graphics()
             .beginFill(0xffffff)
             .drawRect(
@@ -185,10 +197,7 @@ export class Input extends Container
 
         this._cursor.mask = this.inputMask;
 
-        if (!this.inputMask.parent)
-        {
-            this.addChild(this.inputMask);
-        }
+        this.addChildAt(this.inputMask, 0);
     }
 
     get bg(): Container | string
@@ -226,6 +235,11 @@ export class Input extends Container
 
     protected _startEditing(): void
     {
+        if (this.options.cleanOnFocus)
+        {
+            this.value = '';
+        }
+
         this.tick = 0;
         this.editing = true;
         this.placeholder.visible = false;

diff --git a/src/stories/input/InputGraphics.stories.ts b/src/stories/input/InputGraphics.stories.ts
@@ -24,6 +24,7 @@ const args = {
     paddingRight: 0,
     paddingBottom: 0,
     paddingLeft: 0,
+    cleanOnFocus: true,
     onChange: action('Change')
 };
 
@@ -45,7 +46,8 @@ export const UseGraphics = ({
     paddingRight,
     paddingBottom,
     paddingLeft,
-    onChange
+    onChange,
+    cleanOnFocus
 }: any) =>
 {
     const view = new List({ type: 'vertical', elementsMargin: 10 });
@@ -72,10 +74,14 @@ export const UseGraphics = ({
             align,
             placeholder,
             value: text,
-            padding: [paddingTop, paddingRight, paddingBottom, paddingLeft]
+            padding: [paddingTop, paddingRight, paddingBottom, paddingLeft],
+            cleanOnFocus
         });
 
-        input.onEnter.connect((val) => onChange(`Input ${i + 1} (${val})`));
+        input.onEnter.connect((val) =>
+        {
+            onChange(`Input ${i + 1} (${val})`);
+        });
 
         view.addChild(input);
     }