0

I have an app where I need to add a special character, an emoji or something similar, every time the user press a shortcut Ctrl+D.

The problem is I'm using flux and have several inputs on my page, so when someone adds a char into one of the inputs it will call an action, dispatch to the store, and they update the view.

To add this special char I need to handle the keyEvent and know which input component was being used to update the corresponding attribute in the store.

handleShortcut(evt) {
    if (evt.keyCode === ...) {
        MyActions.addSpecialChar();
        evt.preventDefault();
    }
}

Is this the only way? I know that I can get the input using document.activeElement or evt.target but since the inputs are controlled by the store state I can't change their values... Any ideas?

** Update **

To make things more clear... I would like to make my App behave like a "desktop app", no matter in which input I'm in my app, if I press the key combination it will put a special char in that input, that means, it would be handled by the onChange. (I'm not that familiar with React or JS, so maybe I'm asking too much..)

So I would have an onKeyPress in my high order component that would handle the combination and would trigger the onChange on the active input after adding the special character to the value attribute of the input.

The way I made it happen was to set on each input an onKeyPress that will look for the combination and send the same action as my onChange but with the special character in the text.

<input
    onKeyPress={(evt)=>{
        /* ... Check combination ... */
        let text = _addSpecialChar(evt.target.value);
        MyActions.update(text);
    }}
    onChange={(evt)=>{
        MyActions.update(evt.target.value);
    }}
/>

As I said above I would like to handle the combination with the onChange, as a normal character so I don't have to add the onKeyPress on every input. Is this possible?

2
  • What does your store state look like? Why can't you pass the emoji to your store state? Oct 18, 2017 at 17:34
  • @ChaseDeAnda I can and I do, but I would like to add shortcut to put an emoji as if a normal character no matter which input, for example, I can add an emoji using only onChange if I copy/paste it. I updated my question...
    – MNV
    Oct 18, 2017 at 19:57

3 Answers 3

1

Ah thanks, your update made things more clear. Can you try to manually trigger a change event on the input once you enter the emoji?

handleShortcut(evt) {
    if (evt.keyCode === ...) {
        MyActions.addSpecialChar();
        evt.preventDefault();
        // Manually trigger on change here of the active element
        evt.target.onchange();
    }
}

If you need to simulate a full change event, you can try this:

// Create a new 'change' event
var event = new Event('change');

// Dispatch it.
evt.target.dispatchEvent(event);
1
  • That's exactly what I needed!!! The only thing i had to change was the event type it must be new Event('input', {bubbles: true})
    – MNV
    Oct 20, 2017 at 11:59
1

Thanks @chase for the answer!

I will put code of how I solved my problem just for future reference.

handleShortcut(evt) {
    if (evt.keyCode === ...) {
        this.addSpecialChar(evt);
        let newEvt = new Event('input', {bubbles: true});
        evt.target.dispatchEvent(newEvt);
        evt.preventDefault();
    }
}

addSpecialChar(evt) {
    let curText = evt.target.value;
    let curPos = evt.target.selectionStart;
    let newText = /* Add special char where you want */
    let newPos = curPos + 1; /* Move cursor where you want */
    evt.target.value = newText;
    evt.target.selectionStart = newPos;
}

And my component with flux looks like:

<HighOrderComponent onKeyPress={this.handleShortcut}>
    <input
        value={this.state.inputVal}
        onChange={
            (evt) => MyAction.updateInputVal(evt.target.value)
        }
    />
    .
    .
    .
    /* Other inputs */
    .
    .
    .
</HighOrderComponent>
1
0

Try this:

First define your handleShortCut function like this:

handleShortcut(input, evt) {
    switch(input) {
      case 'mySpecialInput':
        if (evt.keyCode === ...) {
          MyActions.addSpecialChar()
          evt.preventDefault()
        }
        break
      default:
        ...
    }   
}

Then when you define your input do something like this:

<input type="text" className="input" 
 value={this.state.value} 
 onChange={this.handleShortcut.bind(this, 'mySpecialInput')}/>

Now you can use the same handleShortcut fn everywhere in that component, and just use bind when you set the onChange function to set the first value that you want passed EVERY TIME the function handleShortcut is called for that input. the 'evt' parameter still gets passed, but as the second parameter now. So if you needed your handleShortcut to be aware of the specific input source from two different inputs and then just handle everything else a generic way, do this:

<input type="text" className="input" 
     value={this.state.value1} 
     onChange={this.handleShortcut.bind(this, 'mySpecialInput', 'value1')}/>
<input type="text" className="input" 
     value={this.state.value2} 
     onChange={this.handleShortcut.bind(this, 'myOtherSpecialInput', 'value2')}/>
<input type="text" className="input" 
     value={this.state.value3} 
     onChange={this.handleShortcut.bind(this, '', 'value3')}/>

and make your handleShortcut function look something like this:

handleShortcut(input, value, evt) {
    switch(input) {
      case 'mySpecialInput':
        if (evt.keyCode === ...) {
          MyActions.addSpecialChar()
          evt.preventDefault()
        }
        break
      case 'myOtherSpecialInput':
        ...
      default:
        evt.preventDefault()
        this.setState({[value]: this.state.value + 'my default symbol'})
    }   
}

Notice that this time i passed another parameter called value, and this is the name of the property on your local state that is used as "value" for the input. For each case, we can hardcode which value we want to affect, but we will need that information for the "default" generic case.

2
  • I didn't downvote... Interesting solution, I would have a "main" function to handle all inputs. The only think I didn't like much was the binding every time I render the component.
    – MNV
    Oct 18, 2017 at 20:02
  • Meh, small price for the added flexibility in my opinion. If you really don't like the binds then you can always make your handle function an arrow function that takes the 'input' from my example and returns another arrow function. Then you would just do something like onChange={this.handleShortcut('mySpecialInput'))}
    – Dude
    Oct 18, 2017 at 21:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.