React-select: Include `name` property in `onChange(selected)`

[jfsiii]

This would make it easier to use a single onChange handler for tracking current state.

e.g. The same change handler

const onChange = (selected) => {
  this.setState({ [selected.name]: selected.value })
}

Could be used for

<Select
    name="form-field-name-one"
    value="one"
    options={optionsForOne}
    onChange={onChange}
  />

<Select
    name="form-field-name-two"
    value="two"
    options={optionsForTwo}
    onChange={onChange}
  />

My current workaround is to create a handler which uses a closure to track the name.

_createChangeHandler(name) {
  const onChange = (newValue) => this.setState({ [name]: newValue.value });
  return onChange;
}

const onChange = this._createChangeHandler(name);
return (
  <Select
    name={name}
    value={this.state[name]}
    onChange={onChange}
    ...
  />
);

but I'd prefer it be available from the function's argument(s).

[jonathanphz]

It seems weird that there's no option to retrieve the name of the Select. How are people dealing with multiple Selects in forms? Multiple onChange functions...?

[dandonahoe]

This is the only nagging issue I have with this library. It seems like since the onChange handler is passed only a single argument, that a second argument containing the control's name could be added without breaking backwards compatibility. This would drastically simplify use when there are multiple selects on a page without hacky workarounds.

[dandonahoe]

I hate half-assing comments when I'm asking for things, so here's more concreted example that would make my project a lot cleaner:

handleChange = (selectedItem, nameOfComponent) => {
  // do things
}

render() {
  return (
    <React.Fragment>
      <ReactSelect
        name='firstSelect'
        value={something}
        onChange={this.handleChange}
        options={someOptions} />
      <ReactSelect
        name='otherSelectName'
        value={otherSmething}
        onChange={this.handleChange}
        options={otherOptions} />
    </React.Fragment>
  );
}

[rhysstubbs]

The fact this functionality hasn't been implemented is enough for me to switch to a different solution, is there any hope this will change? Will pull-requests be accepted for it?

[markoj3s]

https://react-select.com/upgrade-guide
Seems like there is now a second argument actionMeta for onChange. name is accessible from there.

[yim222]

@markoj3s right.
You can access the name property with second argument of the ev.

Example (insert your option and check the console )

:

<Form.Group class="">
                    <Form.Label for="validationTooltip02">מיועד ל-</Form.Label><br/>
                    <h3>Trying to make select </h3>
                    <Select   isMulti
                      MultiValueRemove
                      options={options} defaultMenuIsOpen = {false} closeMenuOnSelect = {false}
                      placeholder  = "choose"

                      onChange = {
                        (ev, meta )=>{
                                console.log(ev, "ev\n", meta, " = meta"); 


                        } }
                        name = "uniqueName"
                    />
</Form.Group>

[codenamerhubarb]

Looks like the second argument of the onChange event only includes the name if there is one option selected, not when isMulti is enabled and you have more than one item selected or you are creating a new item with a CreatableSelect.

[ivan-kleshnin]

+1

The same should apply to onBlur and onFocus which now
1) have entirely different API with event argument instead of a custom object
2) the event.target points to nameless input :(

[Massetho]

+1

Not having an event.target on the onChange option makes this component much less usable in my opinion.

[Methuselah96]

I've started a fork of react-select. Feel free to resubmit this issue on the fork and/or submit a PR to resolve this issue on the fork and we can get it merged and released.

[ebonow]

Greetings @codenamerhubarb

I was not able to reproduce. It appears in all cases onChange was returning the name in the context parameter regardless of value, no value, isMulti, or creating new option.

Here is my testing codesandbox