Using with react-autosuggest, keyborad is not working even when selecting suggestions

[AChao]

I use the example given by the document and have modified the example a little : example/components/autocomplete.js.
Using with react-autosuggest, keyborad is not working even when selecting suggestions. However, supporting keyboard is react-autosuggest's basic function.
Of course, the function of react-tagsinput works successfully.
Here is my code.

// AutoCompleteRenderInput.js
import React from 'react'
import Autosuggest from 'react-autosuggest'

function states() {
  return [
    { abbr: 'AL', name: 'Alabama' },
    { abbr: 'AK', name: 'Alaska' },
    { abbr: 'OH', name: 'Ohio' },
    { abbr: 'OK', name: 'Oklahoma' },
    { abbr: 'OR', name: 'Oregon' },
    { abbr: 'PA', name: 'Pennsylvania' },
    { abbr: 'RI', name: 'Rhode Island' },
    { abbr: 'SC', name: 'South Carolina' },
    { abbr: 'SD', name: 'South Dakota' },
    { abbr: 'TN', name: 'Tennessee' },
    { abbr: 'TX', name: 'Texas' },
    { abbr: 'UT', name: 'Utah' },
    { abbr: 'VT', name: 'Vermont' },
    { abbr: 'VA', name: 'Virginia' },
    { abbr: 'WA', name: 'Washington' },
    { abbr: 'WV', name: 'West Virginia' },
    { abbr: 'WI', name: 'Wisconsin' },
    { abbr: 'WY', name: 'Wyoming' },
  ]
}

function autocompleteRenderInput({ addTag, ...props }) {
  const handleOnChange = (e, { newValue, method }) => {
    if (method === 'enter') {
      e.preventDefault()
    } else {
      props.onChange(e)
    }
  }

  const inputValue = (props.value && props.value.trim().toLowerCase()) || ''
  const inputLength = inputValue.length

  const suggestions = states().filter(state =>
    state.name.toLowerCase().slice(0, inputLength) === inputValue)

  return (
    <Autosuggest
      ref={props.ref}
      suggestions={suggestions}
      shouldRenderSuggestions={value => value && value.trim().length > 0}
      getSuggestionValue={suggestion => suggestion.name}
      renderSuggestion={suggestion => <span>{suggestion.name}</span>}
      highlightFirstSuggestion
      inputProps={{ ...props, onChange: handleOnChange }}
      onSuggestionSelected={(e, { suggestion }) => {
        addTag(suggestion.name)
      }}
      onSuggestionsClearRequested={() => { }}
      onSuggestionsFetchRequested={() => { }}
    />
  )
}

autocompleteRenderInput.propTypes = {
  addTag: React.PropTypes.func.isRequired,
  ref: React.PropTypes.func.isRequired,
  value: React.PropTypes.string.isRequired,
}

export default autocompleteRenderInput

In another file, I use the reacr-tagInput calling AutoCompleteRenderInput.

        <TagsInput
          value={this.state.labels}
          onChange={this.handleChange}
          renderInput={AutoCompleteRenderInput}
          inputProps={{
            className: 'react-tagsinput-input',
            placeholder: '输入标签',
          }}
        />

[Abakumov Valeriy]

Hi all! I'm also found that if I tryed enter new tag and pressed Enter, the handleOnChange function does not called (I saw it with help console.log) - here in example:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TagsInput from 'react-tagsinput'
import Autosuggest from 'react-autosuggest';
import './style.scss';
import './autosuggest.scss';
import { TagPropTypes, SelectedTagsPropTypes } from 'constants/propTypes/handbooks';

class TagsAutocompleteInput extends Component {
    constructor(props) {
        super(props);
    }

    handleChange = (tags) => {
        const { onChange } = this.props
        onChange(tags)
    }
    createNewTag = (tag) => {
        const { onCreateNewTag } = this.props
        onCreateNewTag(tag)
    }

    render() {
        const { value, initialTags, id } = this.props

        function autocompleteRenderInput({ addTag, ...props }) {
            const handleOnChange = (e, { newValue, method }) => {

                // If you input some tag name and press Enter, this function was not called:
                console.log('[onChange]\r\n- e: ', e, '\r\n- newValue: ', newValue, '\r\n- method: ', method)

                if (method === 'enter') {
                    createNewTag(newValue)
                    e.preventDefault()
                } else {
                    props.onChange(e)
                }
            }

            const inputValue = (props.value && props.value.trim().toLowerCase()) || ''
            const inputLength = inputValue.length

            const selectedTags = value
            let suggestionTags = initialTags.filter(tag => {
                return tag.toLowerCase().slice(0, inputLength) === inputValue &&
                    selectedTags.indexOf(tag) < 0
            })

            return (
                <Autosuggest
                    id={id}
                    ref={props.ref}
                    suggestions={suggestionTags}
                    shouldRenderSuggestions={(value) => value && value.trim().length > 0}
                    getSuggestionValue={(suggestion) => suggestion}
                    renderSuggestion={(suggestion) => <span>{suggestion}</span>}
                    inputProps={{ ...props, onChange: handleOnChange }}
                    onSuggestionSelected={(e, { suggestion }) => {
                        addTag(suggestion)
                    }}
                    onSuggestionsClearRequested={() => { }}
                    onSuggestionsFetchRequested={() => { }}
                />
            )
        }

        return <TagsInput renderInput={autocompleteRenderInput} value={value} onChange={this.handleChange}
            inputProps={{ placeholder: 'Начните печатать' }}

            focusedClassName=''
        />
    }
}

TagsAutocompleteInput.propTypes = {
    id: PropTypes.string.isRequired,
    value: PropTypes.arrayOf(PropTypes.string),
    initialTags: PropTypes.arrayOf(PropTypes.string),
    onCreateNewTag: PropTypes.func,

    onChange: PropTypes.func,
};

export default TagsAutocompleteInput;

[Umair Ahmed]

I am also facing the same issue.