Draft-js: handleReturn bug?

[MindRave]

Hello there!

First of all, great work, useful component, thanks for releasing it!

I've stumbled upon what seems like a handleReturn bug. I might have misunderstood (I'm definitely not a JS guru), apologies if this is wrong/nonpertinent.

I'm implementing Draft and I need to preventDefault on the 'return' key, in order to execute a special function instead of the default one. However, when I set the 'handleReturn' option, e.preventDefault() doesn't seem to work.

After going through the code, I noticed the if (!this.props.handleReturn || !this.props.handleReturn(e)) condition in the switch case Keys.RETURN. Correct me if I'm wrong, but it seems that this condition implies the following: if there is no handleReturn option (you take care of two cases here), then preventDefault and insert a new line. If there is a handleReturn option, then preventDefault and do whatever the user wants to be done.

If that is the reasoning, it doesn't work for me (both with a method without bind(this) at the end and with a bind(this)). When I remove the !this.props.handleReturn(e) part, it works as intended - that is, following the reasoning above.

Maybe I missed something, some method (I've been going through the code for awhile now), maybe there is a better, more Draft-y/React way to do what I want? If that is the case, could you kindly point me in the right direction?

If not, then I believe this to be a bug.

Thank you!

[hellendag]

Thanks! Very glad you are finding Draft useful. :)

Regarding handleReturn, are you returning true when you handle the event yourself? http://facebook.github.io/draft-js/docs/api-reference-editor.html#handlereturn

[MindRave]

@hellendag Thank you for the quick reply!

When I call my own handleReturn function, it is called as planned. I cannot preventDefault on it, however. At all. Is this by design?

[hellendag]

The RETURN keydown is always prevented. https://github.com/facebook/draft-js/blob/master/src/component/handlers/edit/editOnKeyDown.js#L84

The important thing here is to return a boolean from your handleReturn function to indicate whether you are handling the key yourself, or allowing the Draft handler system to do so.

[MindRave]

@hellendag Gotcha! It works. So used to just doing event.preventDefault that my mind didn't even think about anything else. Thank you again for your help!

[hellendag]

No problem! :)

[aem]

@hellendag though at this point I don't see the API changing, it's worth noting that jQuery established the convention that return false; in an event handler stops subsequent handling, yet Draft works exactly the opposite way. I'm not sure which I like better, but it is odd that Draft goes against what jQuery has largely established (for better or for worse) as the "norm"

[hellendag]

@aem What I'd actually like to do here is change handle functions from returning booleans to returning values of an enum, for this exact reason.

/* @flow - DraftHandleValue.js */
export type DraftHandleValue = 'handled' | 'not-handled'; // or something

// In component...
handleReturn(e: SyntheticKeyboardEvent): DraftHandleValue {
  // do stuff
  return 'handled';
}

Booleans suck! :)

[aem]

🙌