fix: 45 Text input may need to prevent default/bubble (#211) (#214)

pixijs · Dec 2, 2024 · d04935e · d04935e
1 parent d074567
commit d04935e
Showing 1 changed file with 24 additions and 38 deletions.
diff --git a/src/Input.ts b/src/Input.ts
@@ -1,4 +1,4 @@
-import { Texture, Ticker, utils } from '@pixi/core';
+import { isMobile, Texture, Ticker, utils } from '@pixi/core';
 import { Container, IDestroyOptions } from '@pixi/display';
 import { Graphics } from '@pixi/graphics';
 import { NineSlicePlane } from '@pixi/mesh-extras';
@@ -117,18 +117,7 @@ export class Input extends Container
             utils.isMobile.any && this.handleActivation(); // handleActivation always call before this function called.
         });
 
-        if (utils.isMobile.any)
-        {
-            window.addEventListener('touchstart', this.handleActivationBinding);
-        }
-        else if (!utils.isMobile.any)
-        {
-            window.addEventListener('click', this.handleActivationBinding);
-
-            window.addEventListener('keyup', this.onKeyUpBinding);
-
-            window.addEventListener('input', this.onInputBinding as EventListener);
-        }
+        window.addEventListener(isMobile.any ? 'touchstart' : 'click', this.handleActivationBinding);
 
         this.onEnter = new Signal();
         this.onChange = new Signal();
@@ -154,6 +143,10 @@ export class Input extends Container
     {
         const key = e.key;
 
+        const keysToSkip = ['Shift', 'Control', 'Alt', 'Meta', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+
+        if (keysToSkip.includes(key)) return;
+
         if (key === 'Backspace')
         {
             this._delete();
@@ -164,9 +157,17 @@ export class Input extends Container
         }
         else if (key.length === 1)
         {
+
             this._add(key);
         }
-        else if (this.lastInputData && this.lastInputData.length === 1) this._add(this.lastInputData);
+        else if (this.lastInputData && this.lastInputData.length === 1)
+        {
+            this._add(this.lastInputData);
+        }
+
+        if (this.input) {
+            this.input.value = '';
+        }
     }
 
     protected init()
@@ -302,10 +303,7 @@ export class Input extends Container
         this.placeholder.visible = false;
         this._cursor.alpha = 1;
 
-        if (utils.isMobile.any)
-        {
-            this.createInputField();
-        }
+        this.createInputField();
 
         this.align();
     }
@@ -315,7 +313,7 @@ export class Input extends Container
         if (this.input)
         {
             this.input.removeEventListener('blur', this.stopEditingBinding);
-            this.input.removeEventListener('keyup', this.onKeyUpBinding);
+            this.input.removeEventListener('keydown', this.onKeyUpBinding);
             this.input.removeEventListener('input', this.onInputBinding as EventListener);
 
             this.input?.blur();
@@ -353,7 +351,7 @@ export class Input extends Container
         }
 
         input.addEventListener('blur', this.stopEditingBinding);
-        input.addEventListener('keyup', this.onKeyUpBinding);
+        input.addEventListener('keydown', this.onKeyUpBinding);
         input.addEventListener('input', this.onInputBinding as EventListener);
 
         this.input = input;
@@ -363,6 +361,8 @@ export class Input extends Container
 
     protected handleActivation()
     {
+        if (this.editing) return;
+
         this.stopEditing();
 
         if (this.activation)
@@ -387,12 +387,9 @@ export class Input extends Container
 
         if (this.value.length === 0) this.placeholder.visible = true;
 
-        if (utils.isMobile.any)
-        {
-            this.input?.blur();
-            this.input?.remove();
-            this.input = null;
-        }
+        this.input?.blur();
+        this.input?.remove();
+        this.input = null;
 
         this.align();
 
@@ -551,18 +548,7 @@ export class Input extends Container
     {
         this.off('pointertap');
 
-        if (utils.isMobile.any)
-        {
-            window.removeEventListener('touchstart', this.handleActivationBinding);
-        }
-        else if (!utils.isMobile.any)
-        {
-            window.removeEventListener('click', this.handleActivationBinding);
-
-            window.removeEventListener('keyup', this.onKeyUpBinding);
-
-            window.removeEventListener('input', this.onInputBinding as EventListener);
-        }
+        window.removeEventListener(isMobile.any ? 'touchstart' : 'click', this.handleActivationBinding);
 
         super.destroy(options);
     }