react-mentions
react-mentions copied to clipboard
Way to check if enter key or shift key is pressed in onChange
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
same problem here
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
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.
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.