React-select: onRemove handler not working in version with custom valueComponent

[maximgatilin]

In version ^1.0.0-rc.10 this is not working.
Select component:

<Select.Async
                        name="signal-filter"
                        className={styles.selectSignals}
                        placeholder={signalsPlaceholder}
                        searchPromptText="Type to search (at least 2 characters)"
                        value={values}
                        valueComponent={TrendsSelectValue}
                        loadOptions={this.getSignalsOptions}
                        onChange={this.onChangeTicketsSignals}
                        isLoading={this.props.isLoadingSignals}
                        disabled={isLoadingSignals || isLoadingOntology || isFilteringTickets || isLoadingTickets || isLoadingMonthTickets}
                        delimiter={getReactSelectDelimiter()}
                        simpleValue
                        multi
                    />

Value component:

import React, {Component} from 'react';
import classNames from 'classnames';
import {trendSearchSeparators} from '../../../../utils/constants';
import styles from './TrendsSelectValue.less';

export default class TrendsSelectValue extends Component {
    render() {
        const isSeparator = this.props.value.label.indexOf(`__${trendSearchSeparators.and}__`) !== -1;
        if (isSeparator) {
            const separatorClass = classNames({
                'Select-value': true,
                [styles.separator]: true
            });
            return <div className={separatorClass}>
                <span className="Select-value-label">{trendSearchSeparators.and.toUpperCase()}</span>
            </div>
        }
        return <div className="Select-value">
            <span className="Select-value-icon" onClick={this.props.onRemove}>×</span>
            <span className="Select-value-label">{this.props.value.label}</span>
        </div>
    }
}

In previous version all worked fine, but in 1.0.0-rc.10 onChange handler works after onRemove , but with the same value, without removing

[tobold]

👍

[yuri-sakharov]

How does it works on latest release?

[maximgatilin]

Will check

[tonisostrat]

You need to pass the value property from the props to the onRemove function.

Inline it should look like this:

<Select
  //other props
  valueComponent={option => {
    return (
      <div>{option.value.label}<button onClick={() => option.onRemove(option.value)}>X</button></div>
    );
  }}

[moparlakci]

This is how I did it. And it works. Just in case anybody needs it.

const MyCustomMultiValue = ({ children, ...props }) => {

  const item = props.data;
  const { name } = item;

  return (
    <div className="custom-option-multi-value">
        {name} <span onClick={props.removeProps.onClick}>X</span>
    </div>
  );
}

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!