Way to check if enter key or shift key is pressed in onChange

[arnav-vijayakar]

Currently event in onChange handler does not mention if enter key or shift has been pressed or not. This seems to be different behaviour than synthetic events. Event only has event.target.value property

I wish to use something like this event.key === 'Enter' && !event.shiftKey in onChange handler

[ifokeev]

same problem here

[k-funk]

same. seems that event is only { target: { value: string } }, but DOM event is lost.

FWIW, this was mentioned in 2016 https://github.com/signavio/react-mentions/issues/74

[k-funk]

Looks like other handlers can be passed down as a workaround.

  function handleMentionInputChange(event: { target: { value: string } }, newValue: string, newPlainTextValue: string) {
    ....
  }

  function handleMentionInputKeyPress(event: React.KeyboardEvent<HTMLTextAreaElement>) {
    if (event.keyCode ? event.keyCode : event.charCode === 13) {
      // do stuff
    }
  }

<MentionsInput
  ...
  onChange={handleMentionInputChange}
  onKeyPress={handleMentionInputKeyPress}

Not ideal, but it works.

[yuvalbl]

IMHO, This is a serious limitation regarding integration with other libraries. I've been trying to use react-mentions along with react-hook-form, but the latter use some event properties like target.name.

For the very least - the original event should be passed to the handlers, otherwise, such integration would not be possible.