From 71162ec2c613f7ce67de002bfe14ad0fce05c3e3 Mon Sep 17 00:00:00 2001
From: He4eT <He4eTHb1u@gmail.com>
Date: Fri, 23 Jul 2021 14:38:43 +0500
Subject: [PATCH] InputBox: handle mobile keyboard events

---
 src/components/Player/InputBox.jsx | 17 ++++++++++++++++-
 src/components/Player/player.css   |  1 +
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/Player/InputBox.jsx b/src/components/Player/InputBox.jsx
index bcc4832..a9eaa9a 100644
--- a/src/components/Player/InputBox.jsx
+++ b/src/components/Player/InputBox.jsx
@@ -65,7 +65,12 @@ export default function ({
     setInputText('')
   }
 
-  const charHandler = event => {
+  const charHandler = event =>
+    (event.keyCode === 229
+      ? charHandlerMobile
+      : charHandlerDefault)(event)
+
+  const charHandlerDefault = event => {
     event.preventDefault()
 
     const key =
@@ -75,6 +80,12 @@ export default function ({
     send(key)
   }
 
+  const charHandlerMobile = event =>
+    setTimeout(_ => {
+      send(event.target.value.slice(-1).toUpperCase())
+      setInputText('')
+    })
+
   const lineHandler = ({ keyCode, target: { value } }) => {
     if (keyCode === keyCodes.KEY_RETURN) {
       send(value)
@@ -97,6 +108,10 @@ export default function ({
 
   const inputHandlers = {
     char: {
+      maxlength: '1',
+      autocapitalize: 'off',
+      autocorrect: 'off',
+      spellcheck: 'false',
       placeholder: 'Press any key here',
       onKeyDown: charHandler
     },
diff --git a/src/components/Player/player.css b/src/components/Player/player.css
index 9f99c90..18740a5 100644
--- a/src/components/Player/player.css
+++ b/src/components/Player/player.css
@@ -70,6 +70,7 @@
 
 .ifplayer .output .gridBuffer {
   flex-shrink: 0;
+  max-height: 100%;
   border-bottom: var(--border-width) solid var(--main-color);
 }