[Remote data loading] Empty selected value after form submission

[danielesalvatore]

Hello everyone,

Do you have any idea to achieve the form reset once submitted with remote data loading?

I am currently using react-selectize with single selection and remote data loading. It is used in conjunction with Redux Form.

I would like to implement a component that allows the user search for other users in a remote service, and once one of the suggested choices is selected, that value is used as part of the form submission.

I successfully implemented the remote data loading, following the example I found in the website but I am struggling a bit once I have to clear the value of the selector once the form is submitted.

I usually combine react-selectize and redux-form setting up react-selectize to get the value from the ones passed by redux-form but once the selector is configured to load remotely it is not possible to set the value option because otherwise the selected item will not be shown

This is my current code:

Render for the list component

const renderList = ({input, search, placeholder, onSearchChange, options}) => {

    return (<div className="form-group">
        <SimpleSelect
            placeholder={placeholder}
            options={options || []}
            search={search || ""}
            onSearchChange={onSearchChange}
            onValueChange={(event) => {
                input.onChange(event ? event.value : null)
            }}

            // disable client side filtering
            filterOptions={(options, search) => options}
        />

    </div>)
};

main methods of the redux-form

...

   _onSubmit(values) {
        const {onSubmit, reset} = this.props;
        onSubmit(values.query)
        //   reset(); //reset the form not working because of missing 'value' on selector

    }

    render() {
        const {handleSubmit, search, searchedUsers = [], valid} = this.props;
        return (
            <div className="trusted-filter">
                <form className="form-inline" onSubmit={handleSubmit(this._onSubmit.bind(this))}>

                    <Field
                        name="query"
                        component={renderList}
                        placeholder="Add staff by last name"
                        options={searchedUsers}

                        search={search}
                        onSearchChange={this._onSearchChange.bind(this)}
                    />

                    <div className="form-group pull-right">
                        <button disabled={!valid} type="submit" className="btn btn-default ">
                            Add
                        </button>
                    </div>

                </form>
            </div>

        );
    }

...