React-autosuggest: Using with <textarea>

[Gargron]

So, mostly, this component works with a textarea. However, there are some behaviours that would be nice to be changed when it's used like that:

• Up/down arrow keys should not be a no-op if suggestions are empty
• Tab key should be the same as Enter

Can we add options for this?

[moroshko]

Could you create Codepen with your mostly working example?
Also, I'm not sure I understand the first point. Could you provide an example and describe the expected behaviour please?

[Gargron]

For whatever reason, all Codepen examples only work in Chrome, not in Firefox (though the component itself works fine in Firefox, I think it's just a Codepen issue). Here is an example: https://codepen.io/anon/pen/qqORdp

Note how up/down keys are reserved even when suggestions are empty, also how "enter" to select suggestion doesn't work, you have to click it.

[Gargron]

I haven't tested it but I think perhaps "enter" doesn't work because normally an onChange handler is also attached to the input, and they fire at the same time and the setState from that overrides the change from onSuggestionSelected, so perhaps what we need to do is stop propagation when enter (or tab) is pressed _and_ suggestions are not empty.

Similarly, simply don't prevent default behaviour on up/down arrows when suggestions are empty. I don't think that would break <input>s either.

[a-x-]

will be cool decouple textinput and make possible to use any external texteditor

[a-x-]

for example i want use this awesome suggest component with the facebook «Draft» texteditor

[moroshko]

@a-x- I like the idea of decoupling, but not sure what would the (new decoupled) API look like. If you have any ideas, please open a new issue with your proposal!

[moroshko]

Closing for now.

[oyeanuj]

@a-x- Did you end up using it with Draft?

@moroshko I was looking to use it with Slate editor for mentions and other auto-complete behavior. I think the key complication in the current design is that the input and autosuggest belong to the same container parent, and there are props being passed to the input In the case of RTEs, that is hard since you need some child node components to have the autosuggest. Additionally, onChange and other such handlers are being used in some other manner.

In terms of the new decoupled API design, my initial thoughts were that instead of passing inputProps, and renderInputComponent, the autosuggest could just ask for an input prop. It then becomes up to the user to get the input from their RTE, textarea, debounced inputs, props, etc.

Thoughts?

[a-x-]

I delayed my draft+autosuggest project for undefined times

[ashwani18]

@moroshko can we use the whole autosuggest functionalities with textArea component or any contentEditable component?