React-autosuggest: Load react-autosuggest field in redux-form Issue

[vnydpu]

I am trying to load react-autosuggest in redux-form but not able to get autosuggest value in redux-form formProps of validate method

below is the component render

<form  id="tfmForm" onSubmit={handleSubmit(this.onSave)}>
          <Autosuggest
           suggestions={suggestions}
            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
            onSuggestionsClearRequested={this.onSuggestionsClearRequested}
           getSuggestionValue={getSuggestionValue}
            renderSuggestion={renderSuggestion}
            inputProps={inputProps}
          />
          <input name='temp' type='text' />
 </form>

and sending the component to redux-form

export default reduxForm({
    form: 'tfmForm',
    validate,// will be triggered on user type in form
})(FormComponent);

const validate = formProps => {
          const errors = {};
          //the autosuggest field value is not captured in formProps
          //but i am able to get temp field value but not autosuggest field value.
          return errors;
};

why name attribute is missing in autosuggest after render.
Can you please help me on how to achieve this.

[moroshko]

Sorry, I'm not familiar with redux-form. I suggest you ask there.

If you need to set a name on the Autosuggest input field, just add it to inputProps, e.g.:

const inputProps = {
  name: 'your-input-name',
  // other props here
};

[Unforgiven-wanda]

@vnydpu I am running into the exact same issue. Did you actually solve it?

[sachinKumarGautam]

I having the same issue please someone look into it

[abhash2000]

You must define a wrapper as following:

AutosuggestWrapper = ({input, ...custom}) => {
        return (<Autosuggest getSuggestionValue={(suggestion) => {
            input.onChange(suggestion.value);
            return suggestion.label;
        }} {...custom}/>);
    };

Then use the wrapper in your redux-form field as following:

<Field component={AutosuggestWrapper} name={fieldName} value={this.state.selectedId} 
// other properties except getSuggestionValue
/>

[abhash2000]

The code works fine for me, pay attention that when you change suggestion
label, corresponding id will set in state.selectedId. You must work with
state.selectedId.

On Mon, Apr 2, 2018 at 12:44 AM, Mike-tech [e-mail] wrote:

@abhash2000 https://github.com/abhash2000 did you actually got this to
work? I'm having the same issue and even after trying what you suggested,
it still breaks my application and unable to get value of autosuggest as
mentioned above.
Also in my case i couldn't use any react-autosuggest properties in Field
element. I got an error, could not recognise.

What i really want to achieve is to apply redux-form validation to the
autosuggest input element.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/moroshko/react-autosuggest/issues/314#issuecomment-377813468,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AbsJMjpqYPhXMJfJFAwgoFkPCr8TvVKbks5tkTUKgaJpZM4LfQNK
.