Also trigger onKeyDown when suggestions are open

[jfschwarz]

I'm wondering why we only call the onKeyDown prop if no suggestions are showing. It seems more correct to always call it.

[activescott]

This would be a breaking change. My use of the control depends on the current behavior of /not/ only receiving the keys that the input/suggestions are not using.

[frontendphil]

However, that would only be breaking, because you're relying on incorrect behavior which you shouldn't. Otherwise basically each bugfix must be considered a breaking change.

But tell me @activescott why do you depend on that?

[activescott]

I'm integrating into an existing application that has some legacy keyboard handling and I needed to be able to know tab was not handled by react-mentions and when it wasn't so that I could route it back to this existing keyboard handling code. Obviously, if I were building an app from scratch, there are better ways to handle this, but it is a large existing code base and it isn't something that I can change.

Also, I started relying on this behavior because of the comment in the code as well as the adjacent code there seemed to quite clearly indicate this behavior was deliberate:

handleKeyDown = ev => {
    // do not intercept key events if the suggestions overlay is not shown
    const suggestionsCount = countSuggestions(this.state.suggestions)

    const suggestionsComp = this.suggestionsRef
    if (suggestionsCount === 0 || !suggestionsComp) {
        this.props.onKeyDown(ev)

        return
    }

If you plan to change this behavior that's fine, just please provide the containing control a similarly easy way to determine when react-mentions handles the key and when it doesn't so that we can route the unhanded ones accordingly and ignore the ones that react-mentions handles.

[deepaksisodiya]

It should call onKeyDown on every key down event

[Ransomware0]

try

const handleKeypress = e => {
        if (e.target.value.length >= 3) {
            setSuggestions(users
                .filter(user => user.firmName.toUpperCase()
                    .includes(e.target.value.toUpperCase())
                ).slice(0, 5))
        }
    };

    const handleKeyDown = e => {
        if (e.target.value.length < 3) {
            setSuggestions([])
        }
        else {
            setSuggestions(users
                .filter(user => user.firmName.toUpperCase()
                    .includes(e.target.value.toUpperCase())
                ).slice(0, 5))
        }
    };

[russjman]

Also interested in this; any idea when this'll be addressed?