From 723efc2c2874507f0afcf6222b5f349c5f63bb00 Mon Sep 17 00:00:00 2001
From: Dmytro Soldatov <cyberdexx@gmail.com>
Date: Fri, 20 Oct 2023 23:40:12 +0300
Subject: [PATCH] fix issues

---
 src/Input.ts                               | 10 ++++++++--
 src/stories/input/InputGraphics.stories.ts | 13 +++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/Input.ts b/src/Input.ts
index 3eadebfd..99e5e491 100644
--- 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;
 };
 
 /**
@@ -167,7 +168,7 @@ export class Input extends Container
         this._bg.cursor = 'text';
         this._bg.interactive = true;
 
-        this.addChild(this._bg);
+        this.addChildAt(this._bg, 0);
 
         if (!this.inputField)
         {
@@ -195,7 +196,7 @@ export class Input extends Container
 
         this._cursor.mask = this.inputMask;
 
-        this.addChild(this.inputMask);
+        this.addChildAt(this.inputMask, 0);
     }
 
     get bg(): Container | string
@@ -233,6 +234,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
index 8d62c52b..56c83a45 100644
--- 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,18 +74,13 @@ 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.bg = new Graphics()
-                .beginFill('red')
-                .drawRoundedRect(0, 0, width, height, radius + border)
-                .beginFill('green')
-                .drawRoundedRect(border, border, width - (border * 2), height - (border * 2), radius);
         });
 
         view.addChild(input);