React-autosuggest: Problem with focusInputOnSuggestionClick and Redux Form

[marcselman]

I'm using focusInputOnSuggestionClick={ false }.
But when I select an item I see the following error:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `stopPropagation` on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.

one time for each of these four properties: stopPropagation (above), preventDefault, nativeEvent and target.

And then the follwing error:

Uncaught TypeError: Cannot read property 'type' of null

That last error occurs in redux-form.js inside the getValue function.

var getValue = function getValue(event, isReactNative) {
    if ((0, _isEvent2.default)(event)) {
        if (!isReactNative && event.nativeEvent && event.nativeEvent.text !== undefined) {
            return event.nativeEvent.text;
        }
        if (isReactNative && event.nativeEvent !== undefined) {
            return event.nativeEvent.text;
        }
        var _event$target = event.target;
        var type = _event$target.type;
        var value = _event$target.value;
        var checked = _event$target.checked;
        var files = _event$target.files;
        var dataTransfer = event.dataTransfer;

        if (type === 'checkbox') {
            return checked;
        }
        if (type === 'file') {
            return files || dataTransfer && dataTransfer.files;
        }
        if (type === 'select-multiple') {
            return getSelectedValues(event.target.options);
        }
        if (value !== '' && (type === 'number' || type === 'range')) {
            return parseFloat(value);
        }
        return value;
    }
    return event;
};

I'm not exactly sure why, but if I comment out the line _this2.blurEvent = event; in the onBlur method in Autosuggest.js the problem goes away and everything works.

I've also tried first calling event.persist() on the event object. The error goes away too but then the input does not get updated with the new value.

If you need me to test some things out or log some values etc. please let me know.

[marcselman]

I've been able to work around the issues. I now have a component which works perfectly with redux-form and their Field component.

[moroshko]

@marcselman Great to hear that you were able to solve the issue. If you have anything that you think might benefit others, please share!

[svkhorolets]

To avoid the errors described in this issue, I've found not the ideal (totally not ideal) solution.

Using touch https://redux-form.com/7.2.0/docs/api/props.md/#-code-touch-field-string-function-code-

// Somewhere where reduxForm is connected and the form is placed

...
<Field
  name="name"
  component={AutosuggestField}
  props={{
    touch: this.props.touch
  }}
/>

// AutosuggestField
const { input } = this.props
const inputProps = {
   ...
   onBlur: () => { this.props.touch(input.name) }, // marking the field as touched
}

Would appreciate if somebody shares with more proper solution.

Thanks.