CODEWITHSUNDEEP
javascriptreactjsevents
DonJoe
DonJoe

Reputation: 365

React On Screen Keyboard does not Trigger Change Event

I have created an on screen keyboard (osk) to be used in a kiosk style React app. The osk works as it should and inputs desired text etc. into the appropriate elements. My problem is that inputting text with the osk does not trigger a change event on the target so my onChange handler never gets called. I have attempted to trigger the change event after inserting my my text with the osk as shown below however, my existing onChange handler does not get called the way it does when entering text with the keyboard. What is the best 'React' way to handle this? PS- I am not using jQuery. Thanks!

//update element text from osk
this.props.target.value = (this.props.target.value + btnText);

//attempt to trigger change event
this.props.target.dispatchEvent(new Event('change'));

//input updated from osk
const ce = React.createElement;

ce("input", {
      id: "PasswordText",
      type: "password",
      data: "text",
      onClick: this.clickHandler,
      defaultValue: this.props.accessPassword,
      onChange:this.changeHandler})

//change handler
changeHandler(e) {
    this.setState({
        stateObject: e.target.value
    });
}

Upvotes: 0

Views: 2370

Answers (2)

Carlos C.R.
Carlos C.R.

Reputation: 86

The problem, as Mark point, is due to React not listening to those events (or not trusting them).

To trigger the input event, you have to edit the Extension:

  • Find the dir where the extension is stored on your system

  • Open script.js with your favorite editor

  • Find the virtualKeyboardChromeExtension_click function and add the following after the switch statement:

    function virtualKeyboardChromeExtension_click(key, skip) {
[...]
    switch (key) { // <- find the switch statement
        [...]
    }  // <- after the close brace add the following 4 lines code:
    var inputEvent = new Event('input', {bubbles:true});
    if(typeof virtualKeyboardChromeExtensionClickedElem !== "undefined") {
        virtualKeyboardChromeExtensionClickedElem.dispatchEvent(inputEvent);
    }
    // you are done

  • Save and reload the extension.

NOTE: If you are using chrome it will give you errors and warnings about modified and untrusted extension. But as you are developing a kiosk mode app I suppose you can switch to chromium, enter developer mode and use the Load unpacked extension button to load your modified extension

Upvotes: 5

Mark E
Mark E

Reputation: 3483

I had the same problem with a Virtual Keyboard extension for Chrome. Found out on an issue in react's repository that react hears the input event, not the actual change event.
In your case the solution would be to trigger this event, in my case I opted out of generic virtual keyboards and looked for a more react oriented solution (i.e. a virtual keyboard react's library)

A little late but I hope this helps some one else.
Cheers bro

Upvotes: 0

Related Questions