JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.55k stars 4.12k forks source link

Cant trigger change when custom option is clicked on react-select v1 #3277

Closed fdorantesm closed 5 years ago

fdorantesm commented 5 years ago

Hi, im using react select v1 with a custom select, i have this:

<Select 
     name="payCard"
     options={this.props.userPayCards} 
    backspaceRemoves={false}
    onValueClick={this.handleValueKey}
    value={this.state.conekta_token}
    valueComponent={CreditCardValueComponent}
    optionComponent={CreditCardOptionComponent}
    labelKey={'last4'}
    onChange={this.handlePaymentChange}
    valueKey="id"
    multi={false}
 />
import React, {Component} from 'react';

export class CreditCardOptionComponent extends Component {

    constructor(props) {
        super(props)
        this.handleMouseDown = this.handleMouseDown.bind(this)
        this.handleMouseEnter = this.handleMouseEnter.bind(this)
        this.handleMouseMove = this.handleMouseMove.bind(this)
    }

    handleMouseDown (event) {
        event.preventDefault();
        event.stopPropagation();
        this.props.onSelect(this.props.option, event);
    }

    handleMouseEnter (event) {
        this.props.onFocus(this.props.option, event);
    }

    handleMouseMove (event) {
        if (this.props.isFocused) return;
        this.props.onFocus(this.props.option, event);
    }

    render() {
        return(
            <div className="d-flex" title={this.props.option.last4}>
                <div>{this.props.option.brand}</div>
                <div>{this.props.option.last4}</div>
            </div>
        )        
    } 
}

export class CreditCardValueComponent extends Component {

    constructor(props) {
        super(props)
    }

    render() {
        return(
            <div className="d-flex">
                <div>{this.props.value.brand}</div>
                <div>{this.props.value.last4}</div>
            </div>
        )
    } 
}
handlePaymentChange(token){
    console.log({token})
    this.updateState('conekta_token', token.id );
    this.updateState('selectedPayment', true );
    this.validateForSubmit();
  }

When i clicked an option it doesn't trigger the onchange or selection event. What i am doing wrong?

Regards.

fdorantesm commented 5 years ago

I didn't use events on my component.