Don't trigger onChange if same option is selected in react-select

Question

The onChange of a react-select drop down is getting triggered when I select an already selected value in the drop down. Is there a way to configure react-select to not trigger onChange event if already selected value is selected again.

Here is a codesandbox link. Try selecting Purple and you can see the logs in console. Below is the same code in case you want to see it right away.

import chroma from 'chroma-js';

import { colourOptions } from './docs/data';
import Select from 'react-select';

const dot = (color = '#ccc') => ({
  alignItems: 'center',
  display: 'flex',

  ':before': {
    backgroundColor: color,
    borderRadius: 10,
    content: '" "',
    display: 'block',
    marginRight: 8,
    height: 10,
    width: 10,
  },
});

const colourStyles = {
  control: styles => ({ ...styles, backgroundColor: 'white' }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled
        ? null
        : isSelected ? data.color : isFocused ? color.alpha(0.1).css() : null,
      color: isDisabled
        ? '#ccc'
        : isSelected
          ? chroma.contrast(color, 'white') > 2 ? 'white' : 'black'
          : data.color,
      cursor: isDisabled ? 'not-allowed' : 'default',
    };
  },
  input: styles => ({ ...styles, ...dot() }),
  placeholder: styles => ({ ...styles, ...dot() }),
  singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
};

const logConsole = (selectedVal) => {
  console.log(selectedVal)
}

export default () => (
  <Select
    defaultValue={colourOptions[2]}
    label="Single select"
    options={colourOptions}
    styles={colourStyles}
    onChange={logConsole}
  />
);

user6612182 · Accepted Answer · 2019-04-11 08:14:18Z

2

A possible solution would be to hide the selected value using the hideSelectedOptions prop.

<Select
    { ... }
    hideSelectedOptions
/>

Another solution would be to change your Select component into a controlled component and check in the onChange handler, if the selected value does match the currently selected value, then simply do nothing.

class MySelect extends Component {
    state = {
       value: null
    }

    onChange = (selectedValue) => {
        const { value } = this.state;
        if (value && value.value === selectedValue.value) return;

        // Do whatever you want here

        this.setState({ value: selectedValue });
    }

    render = () => (
        <Select
            { ... }
            value={this.state.value}
            onChange={this.onChange}
        />
    );
}

answered Apr 11, 2019 at 8:14

user6612182

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Don't trigger onChange if same option is selected in react-select

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related