pass index of value to Value
See original GitHub issueFeature 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.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:6
Is there any way to work this around in the meantime?
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).
src/Value.js
, addvalueIndex: PropTypes.number // index of value in selected values
to theValue.propTypes
object at the end of the file.src/Select.js
, addvalueIndex={i}
to each instance of<ValueComponent>
. I.e. search for “<ValueComponent” and put the new prop after value={…}