pass index of value to Value

Feature Request

Use Case: I needed to add a comma to multi select values (Value component) to give the appearance of a comma-separated list for values. The comma is needed in all Value items except for the last value. While I can add the comma with css it’s overly difficult to target the last .Select-value (Since .Select-value’s have the input as a sibling :last-child is out and :last-of-type didn’t work. Oddly:first-of-type did work).

The only way I found to add a class which notes the Value’s index was to extract the index from the id prop which is passed to values but this is not ideal.

// Value.js
render() {
    // extract the index of the item and label value with css class so the last item's comma can be hidden
    const id = this.props.id,
      index = id && id.indexOf('-value-'),
      valueIndex = id && id.substring(index + 7, id.length),
      valueClass = id ? `Select-value-${valueIndex}` : '';
      ...
}

Solution I propose would add optional valueIndex prop to Value.js ~(and add Select-value-${this.props.valueIndex} class if valueIndex is present)~, and pass this valueIndex prop to the ValueComponent in Select.js. Can provide pr if you agree.

[hakunin]

Is there any way to work this around in the meantime?

[deanbot]

Hey @wzup, I forked react-select and made the various edits I noted at the top of the thread. Then I built the project and included the lib folder directly in my project source (a little messy but it worked).

1. In src/Value.js, add valueIndex: PropTypes.number // index of value in selected values to the Value.propTypes object at the end of the file.
2. In src/Select.js, add valueIndex={i} to each instance of <ValueComponent>. I.e. search for “<ValueComponent” and put the new prop after value={…}