Versions
Node: v6.11.4
React: 16.0.0
jQuery: 3.2.1
jQuery UI: 1.12.1
Yarn: v1.2.1

Problem
The keyboard doesn't show by default, and when the text field it creates is touched or clicked on, it doesn't show. Then, when backspacing in that field, it returns the following error:

Uncaught ReferenceError: jQuery is not defined
at HTMLInputElement. (C:\Development\TestApp\node_modules\virtual-keyboard\dist\js\jquery.keyboard.js:863)
at HTMLInputElement.dispatch (C:\Development\TestApp\node_modules\jquery\dist\jquery.js:5206)
at HTMLInputElement.elemData.handle (C:\Development\TestApp\node_modules\jquery\dist\jquery.js:5014)

Setup
I installed react-virtual-keyboard from the repository using the command: "yarn add https://github.com/Utzel-Butzel/react-virtual-keyboard.git" and "yarn rebuild-native-modules". When referencing the keyboard from react, I use "import Keyboard from 'react-virtual-keyboard';". I have the following code for testing the component:

<Keyboard name='keyboard' value={m.first_name} options={{ type:"input", layout: "querty", alwaysOpen: true, usePreview: false, useWheel: false, stickyShift: false, appendLocally: true, color: "light", updateOnChange: true, initialFocus: true, display: { "accept" : "Submit" } }} ref="testkeyboard" />

Additional
jQuery is tested working. Not sure why it's complaining about jQuery. When adding the onChange and onAccept event listeners, it also complains with "Unknown event handler property onAccepted". Any advice?

Getting the following error when trying to use the keyboard with React 16

Uncaught Error: Element ref was specified as a string (keyboard) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

Moving react to the peer dependecies and reinstalling the keyboard did not work

Often times, we need to know what the last keystroke is and respond to it, in this case we are building a non-english input keyboard, which needs to listen on keystrokes. But we cannot get the onKeyPress or other events other that onChange to work.

Any input would be appreciated.

When using the physical keyboard on the input box created by the virtual keyboard, it throws the following error in the console (below). Oddly enough, when enabling "usePreview", reslecting the original text box rather than the auto-focused preview text box, and typing there, it doesn't throw the error. It also doesn't throw the error in mottie on their demo site.

Uncaught ReferenceError: jQuery is not defined
    at HTMLInputElement.<anonymous> (C:\Development\node_modules\react-virtual-keyboard\node_modules\virtual-keyboard\dist\js…:863)
    at HTMLInputElement.dispatch (C:\Development\node_modules\jquery\dist\jquery.js:5206)
    at HTMLInputElement.elemData.handle (C:\Development\node_modules\jquery\dist\jquery.js:5014)

Here's the line it's complaining about.

var event = jQuery.Event( $keyboard.events.kbChange );

Not sure why it thinks jQuery is undefined when it's a dependency and everything else works. The input even goes through (even though it errors and floods the console). Thoughts?

When you open https://www.npmjs.com/package/react-virtual-keyboard, there is reference to github.com/gaearon/react-hot-boilerplate instead of github.com/Utzel-Butzel/react-virtual-keyboard.

It have to be fixed to publish typescript definitions. Here is conversation between me and @sheetalkamat. DefinitelyTyped/DefinitelyTyped#18517 (comment)

I have hidden the preview field in CSS and suddenly the backspace button does not delete the last character.
The OnChange function fires even when the backspace button gets pressed without altering the input and so I cannot write the backspace feature myself. Also the OnChange event has the inputed text reversed. A lot of weird bugs!

Hi

https://github.com/Utzel-Butzel/react-virtual-keyboard/blob/master/lib/Keyboard.js#L82

There is class attribute there that causes React to emit a warning and basically stops the render
have a look

Regards

Hi,

I have installed keyboard inside my react project with npm install virtual-keyboard --save command. Using parts of your code to include the keyboard inside my js page, javascript console give me the error:Uncaught TypeError: Cannot read property 'toLowerCase' of undefined in jquery.js:7095.
I had no problem about importing inside my project not even define Keybord: this is how I instantiate the object Keyboard:
<Keyboard value={ this.state.inputfield } name="inputfield" options={{ type:"input", layout:"qwerty", autoAccept: true, alwaysOpen: false, appendLocally: true, color:"light", class:"sxcycx", }} onChange={this.onInputChanged}
I also initialize the state of "inputfield" with this.state = { inputfield: "Input field" }; inside the constructor and define the onInputChanged function like this:
onInputChanged(newState) { this.setState({ inputfield: newState }); }
Where I'm wrong?

what npm package do I need to install in order to use this component?

I am trying to use this package for a React web app that uses Stripe to process payments and is going to be used inside a kiosk. I am noticing that there is no option to use the keyboard with existing input fields or fields that are not accessible because they are inside an iframe(stripe has an embeddable form that comes with the embeddable button). Is there a way to make this work with existing input fields inside an iframe?

Any help will be appreciated.

Keyboard.js:120 Uncaught TypeError: keyboardSelector.keyboard is not a function
    at VirtualKeyboard.addKeyBoardToDOM (Keyboard.js:120)
    at VirtualKeyboard.componentDidMount (Keyboard.js:107)
    at ReactCompositeComponent.js:262
    at measureLifeCyclePerf (ReactCompositeComponent.js:73)
    at ReactCompositeComponent.js:261
    at CallbackQueue.notifyAll (CallbackQueue.js:74)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:78)
    at ReactReconcileTransaction.closeAll (Transaction.js:207)
    at ReactReconcileTransaction.perform (Transaction.js:154)
    at batchedMountComponentIntoNode (ReactMount.js:124)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:141)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:60)
    at Object.batchedUpdates (ReactUpdates.js:95)
    at Object._renderNewRootComponent (ReactMount.js:317)
    at Object._renderSubtreeIntoContainer (ReactMount.js:399)
    at Object.render (ReactMount.js:420)
    at Object../src/index.js (index.js:81)
    at __webpack_require__ (bootstrap e0120e38b54721e2e782:678)
    at fn (bootstrap e0120e38b54721e2e782:88)
    at Object.0 (index.js:10)
    at __webpack_require__ (bootstrap e0120e38b54721e2e782:678)
    at bootstrap e0120e38b54721e2e782:724
    at bootstrap e0120e38b54721e2e782:724

My App.js is exactly what's in your demo except for the one line

import Keyboard from "react-virtual-keyboard";

I´m trying to change the type of the input created by the component. It is possible to create an input of type "password" or any other types?

Like this:

 <Keyboard 
        value={this.state.value}
        name='keyboard'
        options={{
          type: "input",
          inputType: "password"
    }}
[...]

Thanks

In React v16 we see this error:

invariant.js:42 Uncaught Error: Element ref was specified as a string (keyboard) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).
at invariant (invariant.js:42)
at coerceRef (react-dom.development.js:8579)
at createChild (react-dom.development.js:8833)
at reconcileChildrenArray (react-dom.development.js:9132)
at reconcileChildFibers (react-dom.development.js:9495)
at reconcileChildrenAtPriority (react-dom.development.js:10127)
at reconcileChildren (react-dom.development.js:10118)
at updateHostComponent (react-dom.development.js:10370)
at beginWork (react-dom.development.js:10609)
at performUnitOfWork (react-dom.development.js:12573)

We see a similar error when we revert to React v15.x

We followed the instructions verbatim and not sure what's causing this error. We are only running 1 version of React.

I tried to restrict the length of input to maximum 6. I was set maxLength="6" is not working

then I tried to use a stupid way like this

onPasscode = e => {
    if(this.state.passcode.length <= 5) {
      this.setState({passcode: e.v});
    }
  };

It's worked on a real keyboard but on the lib, I still click on a button and get the result.

This is my code, Setting like an example

<Keyboard
                name="keyboard"
                ref={k => this.keyboard = k}
                options={{
                  type: "number",
                  layout: "custom",
                  customLayout: this.state.customLayout,
                  alwaysOpen: false,
                  usePreview: false,
                  useWheel: false,
                  stickyShift: false,
                  appendLocally: true,
                  color: "light",
                  updateOnChange: true,
                  initialFocus: true,
                  display: {
                    accept: "Submit"
                  }
                }}
                maxLength="6"
                onChange={v => {
                  this.onPasscode({ v });
                }}
                value={this.state.passcode}
                />

Problem: I was looking into the code of keyboard.js to see if there's support for custom elements, but I couldn't see any. It looks like there's only support for creating text, text area, and hidden fields. In the original Mottie keyboard, you can define an element and target it using jQuery. The jQuery sets their $el value that we can access using this.keyboard.keyboard.$el.

Expected: It would be nice to be able to have props.children as $el, or have an overriding prop for Keyboard that allows us to define the input element. I ask because I'd like to replace the input element with a Material UI input element. Maybe there's already a way of doing this and I'm not seeing it? Thanks for your time.

I try install for dev and after npm run start, application listen to port 3000, but after i try on browser http://localhost:3000 , browser show this "Cannot GET /", any configuration i must set for this ?

Hello

Is there a way to disable the logs "Change <...>" and "The content "<...>" was changed/accepted" that pop up when handleChange is triggered ? At least, is it possible to hide them for production ?

• Almarane

I'm attempting to add a mouseover function for all keys. I've seen this issue, but cannot find the correct selector for all virtual-keyboard buttons.

Do you have any recommendations?

Hi.
I'd like to use react-virtual-keyboard with typescript. Do you have typescript definition file?

I have been using this library for months without a problem. I haven't changed the code recently but I started getting this error this week.

Code:

import Keyboard from 'react-virtual-keyboard';

<Keyboard
className={"email" + (emailSent === null ? " email-invalid" : "")}
value={customerEmail||""}
name=' '
options={
{
type:'input',
layout:'qwerty',
autoAccept: true,
alwaysOpen: false,
appendLocally: true,
color:'light',
class:'sxcycx',
updateOnChange: true,
usePreview: false
}
}
onChange={(value)=>{this.onEmailChanged(value);}}
/>