Use react-select inside redux-form lost selected value issue

[tarim]

Hi All,

I used react-select inside redux-form, and I have an issue for selected value. When I select value then change focus to other input, the react-select selected value become empty. I searched all internet and couldn't find and solution, could someone help me please?

Thanks,

[erikras]

You need to override the default onBlur:

<Select {...field} onBlur={() => field.onBlur(field.value)}`/>

[erikras]

See: JedWatson/react-select#489

[tarim]

Hi erikras,

Thank you very much for your quick response. I did, but still it doesn't work for me. I tried your example on #82 . Basically, what I did is, I build my own component with react-select, then main form(redux-form) I used my component.

my select component

render() {
const {invoiceMonth,field,onBlur,onChange}=this.props;
const options=this.props.invoiceMonth.map(month=>({label:month.invoicePeriod,value:month.invoicePeriod}));
return (
<Select onChange={this.onChange} onBlur={() => field.onBlur(field.value)} {...field} options={options} />

        );
}

main form

<InvoiceMonth {...period} />

Thanks for your help.

[akashshinde]

@erikras I am taking Select component as a custom component and wrapping it in Field

SelectionComponent Returns

<Select.Async loadOptions={this.props.getOptions} {...this.props} />

FormComponent Wraps

<form>
<Field name="selectField" component={SelectionComponent} loadOptions={getOptions}/>
</form>

As you are suggesting to override

<Select {...field} onBlur={() => field.onBlur(field.value)}`/>

Can you be more specific how I can do this in Field -> Select component ?

[erikras]

@akashshinde SelectionComponent should do it.

<Select.Async
  loadOptions={this.props.getOptions}
  {...this.props}
  onBlur={() => this.props.onBlur(this.props.value)}/>

Then use Field as you are.

[akashshinde]

@erikras Just tried it with this.props, It seems onBlur method which overriden in Select.Async not getting called.

[MarsWang42]

@akashshinde @erikras

Hey guys I tested the code above on redux-form v6 and redact-select v1.0 and finally with the following code it works. In v6 the onBlur function is inside this.props.input instead of this.props.

<Select
    options={this.props.input.options}
    {...this.props.input}
    onBlur={() => {this.props.input.onBlur(this.props.input.value) } }/>

[Kannaj]

I'm still having the same issue .. basically the onBlur event makes the value of the input box to null. Am i missing something? here's my code

        <div className="block">
          <label htmlFor="category">Category</label>
          <Select.Async name="project_category"
            loadOptions={this.getOptions.bind(this,'category')}
            onChange={this.handleChange.bind(this,'category')}
            value={this.props.fields.category.value}
            onBlur={() => {this.props.fields.category.onBlur(this.props.fields.category.value) }}
            {...category}
             />
        </div>

[jmwohl]

For those using redux-form v6, one important note about the answer above from @Marswang92 — this.props.input includes the default event handlers, including onBlur, so your overriddenonBlur must come after using the spread operator to add properties of the input to your Select component.

[swp44744]

@Marswang92 @jmwohl I am using redux form v6, react-select 1.0. I am still getting "Cannot read property 'onBlur' of undefined" even when onBlur is called after spread operator. here is my code:

<Field name="redux-form-field-name" type="text" component={props =>
<Select.Async
type="text"
loadOptions={this.handleChange}
{...this.props.input}
onBlur={() => {
this.props.input.onBlur(this.props.input.value)
} }
/>
}/>

Any help would be greatly appreciated..! thanks

[swp44744]

Nevermind, I got it worked when I use "props.input.onBlur" instead of "this.props.input.onBlur". But still when I select the value it is set to value=""

[swp44744]

finally I got it working,

<Field name="redux-form-field-name" type="text" component={props =>
<Select.Async
type="text"
loadOptions={this.handleChange}
{...props.input}
placeholder="Start typing bro..."
onBlur={() => {
props.input.onBlur(props.input.value)
} }
/>
}/>

[quicksnap]

Thanks to everyone for putting in the legwork on this issue! You all saved me so much time!

🎊 🎉 🎂

[ghost]

Yes. A big thank you. I simply never would have been able to work that out myself! Fantastic!

[Slavenin]

Hi!
I have this problem with semantic ui.

I render my select as:

import { Field as RField } from 'redux-form';
import {
    Input,
    Checkbox,
    Radio,
    Select,
    TextArea,
    Button,
    Form
} from 'semantic-ui-react'
/*...*/

return <Form.Field required={required}>
                <label>{label}</label>
                <Select
                    name={full_name}
                    label={label}
                    placeholder={label}
                    options={options}
                    onChange={input.onChange}
                    onBlur={input.onBlur}
                    multiple={multiple}
                    disabled={disabled}
                    required={required}
                    {...props}
                    {...attr}
                />
            </Form.Field>

and insert this in component prop.
But when onChange triggered in console i see:
action Object {type: "@@redux-form/BLUR", meta: Object, payload: undefined}

And i have problem with first loose focus on change...

I create gist with full code https://gist.github.com/Slavenin/b046996373103b0a7a0261c0dbdabb09

[Slavenin]

I solve this problem.

onChange={(e, data) => {input.onChange(data.value)}}

[Slavenin]

No. This not work for multy select.
Event

In state after change:

UPD i find problem in select name: task_type[userResponsible][]. If name ended on [] added empty key. But this name format is correct!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.