hodgef / react-simple-keyboard Goto Github PK

React-simple-keyboard version

"react-simple-keyboard": "1.21.2"

Describe the bug

Keyboard caretPosition is not updated after clearInput.
And after that, backspace does not trigger change and cannot be deleted.

React-simple-keyboard version

"react-simple-keyboard": "1.21.6",

Describe the bug

When I set preventMouseDefault=true, press a key on the keyboard for a while, move it out of the keyboard area, then release it, it will appear all the time.

React Virtual keyboard is not working with input mask also backspace is not working.

Is your feature request related to a problem? Please describe.
When adding a custom button is there any possibility to define the value which will be written into the input box?
I've added a new button named "clear", within the onKeyPress event I'm handling the action (clearing the input field in this case), but the keyboard writes the name of the button into the input field.

Describe the solution you'd like
Distinguishing between label and value for a button, or adding the possibility to change the value inside the onKeyPress event handler, or stopping the default action for a button. Currently the click event object is not passed to onKeyPress, there is no possibility to stop the event propagation.

Describe alternatives you've considered
non

Additional context
none

It supports China's Pinyin input method ？

How can I use it to implement Chinese Pinyin input method ?

Thank you ！

can‘t Insert input according to mouse position；
cant support cross-line button display？

Add the index.d.ts file

React-simple-keyboard version
^2.1.114

Describe the bug
The propsChanged helper doesn't detect if the prop that changed is a function.
JSON.stringify strips out methods from objects.

JSON.stringify({a: () => console.log('hey')})
"{}"

Hello, @hodgef Thank you for the keyboard! it works like a charm.
I have a question, is there a way to highlight when a screen keyboard key is pressed with some kind of animation or color change?

I have some scenario where some of the input need to set like disableCaretPositioning =false and some of the input need to set isableCaretPositioning =true so in this case backspace is not working

I am using this package for the virtual keyboard, but facing one awkward issue

In which I have two different inputs to get different values like Firstname and Lastname.

I need to use backspace to remove characters but unable to get working backspace functionality for both inputs

Mean to say that when I use backspace for a single input and the same time I move to another input, at that time backspace will not work for first input control what I have used along with codesadbox demo.

Please find the mentioned codesandbox demo link for the complete reference

https://codesandbox.io/s/mjpo1j64qp

Just go through the link I have provided so that you can get to know about the problem what i have faced currently.

I am using this in my project, when i click on input, my app crached with follow message.
Uncaught TypeError: Cannot read property 'setInput' of undefined.

There is a demo for a mobile keyboard https://franciscohodge.com/projects/simple-keyboard/demo-showcase/mobile/.
But I dont see how to implement this?

After an update to React 16.9, a warning appears in the console that the method 'componentWillReceiveProps' in the KeyboardReact component will be renamed in the next major version of React.

Since the project has to be adjusted anyway, I wanted to ask if there are any plans on your part to switch everything to react hooks?

This is not a Bug. The project is still stable and running smoothly ;-)

Cheers
Daniel

React-simple-keyboard version
As some bugs have been addressed in later versions, please ensure you are running the latest.

Describe the bug
A clear and concise description of what the bug is.

Screenshots
If applicable, add screenshots to help explain your problem.

React-simple-keyboard version
I'm using react-simple-keyboard -> 1.14.1 and I've following this link to handle multiple inputs. Everything works fine unless backspace button doesn't return any response from onChange function

For now, I must click on an input again then backspace will be working.

any help or suggestion?

Screenshots

When often unmounting and mounting the Keyboard component, I am experiencing a memory leak. A missing destroy() may be the culprite.

I am able to let the GC do its thing when adding the following to the Keyboard component

useEffect(() => {
  return () => {
    keyboardRef.current.destroy();
  };
}, []);

Here is a screenshot of a snapshot when not adding the .destroy() and remounting often (the keyboard is not the only thing mounted here):

In the examples (and, from my tests, in the lib itself), the caps lock/shift keys do nothing.

Wouldn't it be good to include a full example, where these keys work?

This is what I do:

    state = {
        val: "",
        kblayout: "default"
    }
   handleKeypress = (input) => {
        if ((input == '{shift}' || input == '{lock}') && this.state.kblayout=="default")
            this.setState({kblayout: 'shift'})
        else if ((input == '{shift}' || input == '{lock}') && this.state.kblayout == 'shift')
            this.setState({kblayout: "default"})
    }

    handleChange = (val) => {
        this.setState({val})
    }

  kblayout = {
      'default': [
        '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
        '{tab} q w e r t y u i o p [ ] \\',
        '{lock} a s d f g h j k l ; \' {enter}',
        '{shift} z x c v b n m , . / {shift}',
        '.com @ {space}'
      ],
      'shift': [
        '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
        '{tab} Q W E R T Y U I O P { } |',
        '{lock} A S D F G H J K L : " {enter}',
        '{shift} Z X C V B N M < > ? {shift}',
        '.com @ {space}'
    ]
    }

    render() {
        return (
            <React.Fragment>
                <input type="text" value={this.state.val} />
                <Keyboard
                  layout={this.kblayout}
                  layoutName={this.state.kblayout}
                  onKeyPress={this.handleKeypress}
                  onChange={ this.handleChange }
                />
            </React.Fragment>
        )
    }

Not sure if this is a bug or me not using this properly. Through the react interface the theme option does not work. I am trying to setup to use the numeric keypad but I cant get this to work.

Usage:

                            <Keyboard
                                ref={r => (this.keyboard = r)}
                                layoutName={this.state.layoutName}
                                onChange={input => this.onChange(input)}
                                onKeyPress={button => this.onKeyPress(button)}
                                theme={"hg-theme-default hg-layout-numeric numeric-theme"}
                            />

Does anyone know how to use this feature ?

It will be awesome if you can set as parameter the language for all buttons, including the bksp property.

I already saw for the other buttons, but I didn't saw anything for this property.

Tks!

I'm not able to call keyboard.getInput() using hooks.
The error says: keyboard.getinput() is not a function
I feel there is something I don't understand. Please help.

React-simple-keyboard version
Using the latest version

Describe the bug
Having the ".com" button clicked multiple times it does not take the maxLength property because for the triple equality check in simple-keyboard Utilities.js line 307. Once the ".com" crosses the maxLength it just keeps ongoing.

Describe the bug

After using this preventMouseDownDefault, when you insert the cursor in the middle of the input word, the cursor changes to the end.

Screenshots

I have been trying to clear multiple input fields with one button press but I have not been able to achieve it. However, I have no issues clearing single input box with a button click.
I'm not sure if this is a bug or I'm missing something.

Here are the screenshots:

I want to clear all inputs when I press X

After I press X the input clears but

When I try to type anything from the react-simple-keyboard the previous values appear again

I'm clearing the input value and the keyboards internal state together with the local state storing the values.

Please note that it works with a single input field. The ghost values only appear with multiple inputs.

Additionally, this issue does not occur when I enter values from the physical keyboard

Is your feature request related to a problem? Please describe.

In a way it is. Let's say we have an autocomplete component. While you type something in your input with the keyboard, the dropdown list keeps updating underneath. Once you click on one of those suggestions from the dropdown it will populate that input with a selected suggestion. I will also update the keyboard to let it know that the input has changed:
keyboardRef.current.setInput('value', 'inputName');

What doesn't get updated is caretPosition so if I continue to start typing, it will not start from the end of the input string, it will continue from where it was before we selected suggestion from the dropdown.

I can fix that by changing the caretPosition:
keyboardRef.current.caretPosition = value.length;

Although, in my case, it was even better to just do:
preventMouseDownDefault={true}
Which handles it by default. But this might not be acceptable solution for some people.

Describe the solution you'd like

This is more of a question than immediate feature request. I'm not sure if you wanted to make caretPosition property public and let me change it like this. Also, there's no mentioning of this in the docs. So, maybe we need to add new method like setCaretPosition or just update the docs to let people know this is the correct way of handling it.

Additional context

Very low priority. Cheers.

import Keyboard from "react-simple-keyboard" raises error "Can't resolve 'react-simple-keyboard'"
I was able to import it using "import Keyboard from "react-simple-keyboard/build"".
I think either there is no root index file or some issue with linking. As a user I cannot determine from where to import the feature, Keybord. It should be linked with the root directory so that I can import it directly using library name.

Backspace key is always deleting last character.
Steps to reproduce:

'|' is showing cursor position

1. Type few characters for example - "REACT|"
2. move cursor in between some where - for example - "REA|CT"
3. Press backspace - it deletes 'T' rather than 'A'

Hello!
I started to make a custom keyboard with math symbols using this library.
As you can see in the first screenshot, I have a button loaded with an integral symbol inside it. I loaded this symbol using mathjax, and I used the 'display' property of the Keyboard component to render the symbol inside the button. Everything is fine, until I click inside the editor box (actually I focus it). When I click inside it, I lose the integral symbol inside the Keyboard button, it is not visible anymore (as you can see in the second screenshot).

Screenshot 1:

Screenshot 2:

So my question is:
Why it is happening and how could I prevent it? I just want to keep the integral symbol visible all the time. I attach here all the code I wrote. Thanks in advance! :)

Code screenshot 1 (the main component "Start.js"):

Code screenshot 2 (the logic - not finshed "ProblemEditor.page.js"):

Code screenshot 3 (the component "ProblemEditor.component.js"):

Code screenshot 4 (the css file "ProblemEditor.css"):

I'm using react-simple-keyboard for multiple inputs, but when the user clicks somewhere in the middle of the input, the keyboard updates the caret position and puts the first letter in correct place. However, it resets the caret position to null afterwards and puts the other added letters at the end. I didn't come across this issue with simple input and it only happens when I use multiple inputs.

My suggestion is to make one able to pass value through options which will be changed internally with setInput().

Problem I have encountered with this is if one is using a component and wants to implement custom logic with onKeyPress button, all the logic has to be implemented through keyboardRef and then written on the actual onKeyPress prop. Other way is to pass a ref to the store if one would call onKeyPress from the store, but that solution is also not clear.

So why not make a prop called value which will be a reference to some variable that can then be changed from both the library and the store?

react-simple-keyboard version
1.9.1

Describe the bug
While investigating issue #37 I introduced some console logging of events in my local code snapshot.

What I found is that the caret event handler is being called for previous instances of the Keyboard that were instantiated in other "render" methods for other components.

In other words, if over time I have conditionally rendered N instances of the keyboard, I get N console logs for the same Touch or Mouse Event with each click of the mouse.

Oddly, however, turning "debug" on for the Keyboard shows that only the most recent instance of the Keyboard processing the event, since only 1 set debug output is logged, even though there are N copies of my console.log statement in the "caret event handler" (for example).

Hello!

I've been using your plugin for a feature in my app, and so far it's pretty good!

But I'm having a bit of an issue with the backspace. If the target field has some sort of mask (such as react-input-mask), the backspace doesn't work properly.

As far as I could track, this is caused because the input field value and the inner keyboard value are "different" when a mask is applied. I.E: If I have a phone mask, the input field value turns into (30)1234-5678, while the keyboard value is 3012345678

If I touch outside of the input and then inside again, on the last digit, the debug will show me that I clicked on position "12" due to the extra characters, even though the inner keyboard input value only has 9 positions.

And so, if I try to delete the information from the input field, I have to press the backspace button 3 times until the field starts to be deleted.

Is there any way, currently, to circumvent this issue so that the keyboard input value "adjusts" to the actual input value!

Thanks in advance!

Marcos Rodrigues

React-simple-keyboard version
2.3.4

Describe the bug
Since the new version, rows are being de-mounted and re-mounted every time the keyboard is re-rendered. This is not very efficient, but more annoying, the active state of a pressed button do not work anymore if you re-render the keyboard on each key press (e.g. because an input state has been updated which I expect is a very common use case).
I downgraded to 2.2.83, and everything is back to normal.

React-simple-keyboard version 1.24.0

Describe the bug
I have a keyboard in one Component and if i try to open a Dialog (modal) on top that contains another one it does not show up. I see on the DOM the

I'm trying to implement clear Input when button is press the input text doesn't get clear. When I press another button to what happens the previous text gets cleared and replace by the text that I have press.

Hello,

I have integrated [email protected] in my app using the Next.js framework ([email protected]). when I try to build the app i've got :
../node_modules/react-simple-keyboard/build/css/index.css
BrowserslistError: Unknown browser query dead

is there a way to correct it ? specific webpack version or other ?

Thank you in advance.
Regards,

I'm running the lastest version, 1.21.3

If you press the keys until the input is filled to its width, the input does not scroll to see the most recent value and the end of the value

example:
| | <- input size
|abcdefge|ijklmnop <- when it overflows

The visible values are always the same, it never scrolls to the most recent.

This happens in the Demos too, with a textarea if you press Enter a couple of times till it "overflows" you won't be able to see what you are typing unless you use the scroll bar to scroll down.

React-simple-keyboard version
2.2.83

Describe the bug

Once the Keyboard component is initialized, the onKeyPress prop can not be changed and the Keyboard continues to use stale props (the original onKeyPress function used to initialize the Keyboard).

Example

CodeSandbox: https://codesandbox.io/s/modern-smoke-5jo8d

The example works in the following way:

• there are 2 strings
• when clicking a button or pressing a virtual keyboard key, we write to whichever string is the shortest. Therefore, the string that gets written to will switch with every render.

The button in the example works correctly, and allows the onClick function to be updated between renders, therefore writing to the shortest string each time.

The Keyboard in the example does not work correctly, and the value of onKeyPress does not change for the life of the component, therefore always writing to the initial string.

Source of bug

The bug is in the function that is responsible for detecting a prop change:

https://github.com/hodgef/react-simple-keyboard/blob/master/src/lib/services/Utilities.js

export const propsChanged = (prevProps, props) => {
  const cleanProps = sourceObj =>
    JSON.stringify({
      ...sourceObj,
      stateToIgnore: null
    });

  return cleanProps(props) !== cleanProps(prevProps);
};

When the props are 'cleaned', any function props are removed, therefore changes to function props will never be detected.

Running the following code:

const props = {
  someNumber: 5,
  onKeyPress: () => {
    console.log("You pressed a key");
  }
};

const cleanProps = sourceObj =>
  JSON.stringify({
    ...sourceObj,
    stateToIgnore: null
  });

console.log("before clean:", props);
console.log("after clean:", cleanProps(props));

gives the output:

before clean: { someNumber: 5, onKeyPress: [Function: onKeyPress] }
after clean: {"someNumber":5,"stateToIgnore":null}

Is there a reason that we are using this cleaning function to compare props, or indeed, comparing props at all?

React provides memo which is a way to prevent re-render on specific prop changes.

[ wait ] compiling ...
[ error ] ../node_modules/react-simple-keyboard/build/css/index.css 22:12
Module parse failed: Unexpected token (22:12)
You may need an appropriate loader to handle this file type.
| * LICENSE file in the root directory of this source tree.
| *

/body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:-webkit-flex;display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button-container,.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-row>div:last-child{margin-right:0}.simple-keyboard .hg-row .hg-button-container{display:-webkit-flex;display:flex}.simple-keyboard .hg-button{display:inline-block;-webkit-flex-grow:1;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default:not(.hg-touch-events) .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
| /# sourceMappingURL=index.css.map */
[ event ] build page: /next/dist/pages/_error
[ wait ] compiling ...

using react-simple-keyboard with NextJS fails with

ReferenceError: window is not defined

I will update this issue with my solution shortly

Al;

starting from the NextJS tutorial, create an app & add this as the pages/index.js file

import React from 'react';

import Keyboard from 'react-simple-keyboard';
// import 'react-simple-keyboard/build/css/index.css'; // NOTE: load from _app.js

export default function Index() {

  onKeyPress = (button) => {
    console.log("Button pressed", button);
  }


  return (
    <div>
      <Keyboard
        onChange={this.onChange}
        onKeyPress={this.onKeyPress}
      />
    </div>
  );
}

and add this as the pages/_app.js file

import '../styles.css'

import 'react-simple-keyboard/build/css/index.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

The result is this error:

ReferenceError: window is not defined
(anonymous function)
/Users/ajoslin/Documents/Als/Development/EPC/Development/mobile-remote-activation/node_modules/react-simple-keyboard/build/index.js:12:292
Module._compile
internal/modules/cjs/loader.js:688:30
Module._extensions..js
internal/modules/cjs/loader.js:699:10
Module.load
internal/modules/cjs/loader.js:598:32
tryModuleLoad
internal/modules/cjs/loader.js:537:12
Function.Module._load
internal/modules/cjs/loader.js:529:3
Module.require
internal/modules/cjs/loader.js:636:17
require
internal/modules/cjs/helpers.js:20:18
react-simple-keyboard
webpack:/external "react-simple-keyboard":1
> 1 | module.exports = require("react-simple-keyboard");
View compiled
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 | 	modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 | 	threw = false;
  23 | } finally {
  24 | 	if(threw) delete installedModules[moduleId];
View compiled
Module../pages/index.js
/_next/development/server/static/development/pages/index.js:108:79
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 | 	modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 | 	threw = false;
  23 | } finally {
  24 | 	if(threw) delete installedModules[moduleId];
View compiled
3
/_next/development/server/static/development/pages/index.js:148:18
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 | 	modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 | 	threw = false;
  23 | } finally {
  24 | 	if(threw) delete installedModules[moduleId];
View compiled
▶ 2 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

Details

Current version: 1.6.1
React Version: 16.4.0

Overview

Currently, when setting up the display alternatives for some of the buttons the usage is as follow:

display={{
  '{bksp}': 'delete',
  '{enter}': '< enter',
  '{shift}': 'shift',
  ...
}}

This is great and very useful, however, one likely scenario is that it would be super useful to have images or HTML elements instead of just text.

When looking at this line:
https://github.com/hodgef/simple-keyboard/blob/master/src/lib/components/Keyboard.js#L427
it's clear that whatever value we assigned to any of the buttons in the display object, will be set as is, meaning that it will be assigned as an Object if given one, instead of or a properly set DOM element, besides strings (or any other JS primitive form).

Is there any future plan to support this? I can gladly open up a PR if you're interested. Thanks :)

Do we have option of Onscreen Left and Right Arrow [Cursor keys] for React-simple-keyboard. As i want to move the input of the character based on the left and right arrow on screen keyboard .

Also can we map the input to a user defined input box and also at thew time of using the on screen keyboard, does the input lose focus . ?

React-simple-keyboard version
1.25.0

Describe the bug
When rendering the keyboard inside enzyme's mount function for testing, I get ".react-simple-keyboard" was not found in the DOM. in the console and KEYBOARD_DOM_ERROR as an exception.

Screenshots
Instead of screenshots, here's a minimal replication case (added to a create-react-app project):

keyboard.spec.tsx

import * as React from 'react';
import { mount } from 'enzyme';
import Keyboard from 'react-simple-keyboard';

describe('Keyboard Component', () => {

  it('should append to the value when a text button is clicked', () => {
    const onChange = jest.fn();

    const target = mount(<Keyboard onKeyPress={onChange} />); // breaks here
    target.find('[data-skbtn=o]').simulate('click');
    expect(onChange).toHaveBeenCalledWith('o');
  });
});

I tried to get or patch value from input element when I click it.
It always shows blank input area even if input element has a value.

1. click input box
2. shows screen keyboard with input area
3. input some text.
4. click the input box again
5. shows screen keyboard with blank input area instead what I entered.

This is a MINOR issue. When using keyboard with React, the layout field always expects a default property of type default: string[].

I apologize if this has already been addressed or if this is just something I botched while implementing. Love the app!

So the following:

<Keyboard
      layoutName="ip"
      onChange={(input: string) => onChange(input)}
      onKeyPress={(button: string) => onKeyPress(button)}
      layout={{
        ip: ['7 8 9', '4 5 6', '1 2 3', '0 . {clear}', '{bksp} {enter}']
      }}
      display={{
        '{clear}': 'C',
        '{bksp}': 'del',
        '{enter}': 'enter'
      }}
/>

Must become:

<Keyboard
      layoutName="ip"
      onChange={(input: string) => onChange(input)}
      onKeyPress={(button: string) => onKeyPress(button)}
      layout={{
        *default: [''],*
        ip: ['7 8 9', '4 5 6', '1 2 3', '0 . {clear}', '{bksp} {enter}']
      }}
      display={{
        '{clear}': 'C',
        '{bksp}': 'del',
        '{enter}': 'enter'
      }}
/>

React-simple-keyboard version
Using version 2.0.15

Describe the bug
Having input type as email and then using the keyboard to type some input and then manually changing the caret position in the input field then again typing in the virtual keyboard the text is appended to the end of the input field rather than the cursor position. But if I remove the input type for the input tag everything is working fine.

https://codesandbox.io/s/react-simple-keyboard-demo-rng8n

I use react-autocomplete and selecting an item doesn't set the caret to the end of the string unless a user selects the input again.

If there is a way to manually set this, to easily control the caret this would solve this issue and others..

I'm sure this already possible, but couldn't find it in the documentation. The use-case is that the user needs to type in their name with first-letter-capitalized, so we want the keyboard to start off as if shift key had been pressed. Then after the first typed character it should return to normal (as it does with a manual press of 'shift'). thanks!

React-simple-keyboard version
1.21.2

Describe the bug
When using a static site builder like Gatsby or Next.js, building a project with react-simple-keyboard fails, because window is used somewhere in the code.

Is there a way to make the backspace (and shift, caps lock etc.) keys render as icons or symbols, .e.g.,

http://blog.elliottcable.name/posts/useful_unicode.xhtml

The language translations are not optimal with English text. (backspace, shift, etc.)

I wanted to fix the react simple keyboard at the bottom of my react app and then use it as a keyboard for all the inputs in whole app.

Also want to keep the input focus while typing.