isClearable not working as expected

[frankforpresident]

Description When building an autocomplete component I've noticed that the isClearable property isn't adopted. Other properties like isDisabled, isMulti, isSearchable, isCreatable are working fine. If i try to overwrite the value with an external button the component is acting weird. When injecting null into single mode the value is NOT cleared and the clear button suddenly appears. When in multi mode, every selected item is delete except one.

Version 5.1.0

Expected Adding { isClearable: true } to SelectProps will activate a clearable field with a clear button to clear the value.

Actual No clear button is visible. Even when isMulti is active and more than two values are selected.

My Custom HOC

import React from 'react';
import * as PropTypes from 'prop-types';
import ReactSelectMaterialUi from 'react-select-material-ui';

const AutoComplete = props => {
  const { label, value, items, onChange, multi, searchable, disabled, clearable, creatable, fullWidth } = props;

  //Styling options available at https://react-select.com/styles
  const styles = {
    control: () => ({
      borderBottom: disabled ? 'dotted 1px rgba(0,0,0,0.54);' : 'solid 1px rgba(0,0,0,0.54);',
    }),
    menuList: base => ({
      ...base,
      backgroundColor: '#ffffff',
      color: '#000000',
    }),
    singleValue: base => ({
      ...base,
      fontFamily: 'sans-serif',
    }),
    multiValue: base => ({
      ...base,
      fontFamily: 'sans-serif',
      backgroundColor: '#e8e9ee',
      padding: '4px',
    }),
    noOptionsMessage: base => ({
      ...base,
      color: '#000000',
      fontFamily: 'sans-serif',
      textAlign: 'left',
    }),
    option: (base /*{ isSelected }*/) => ({
      ...base,
      fontFamily: 'sans-serif',
      backgroundColor: '#FFFFFF',
      color: '#000000',
      padding: '10px 15px',
      '&:hover': { backgroundColor: '#d6d6d6', color: '#000000' },
    }),
  };

  const handleChange = value => {
    onChange(value);
  };

  return (
    <div style={props.style || {}} className={props.className || ''}>
      <ReactSelectMaterialUi
        label={label}
        value={value}
        options={items}
        SelectProps={{
          isMulti: multi,
          isDisabled: disabled,
          isSearchable: searchable,
          isClearable: clearable,
          isCreatable: creatable,
          styles,
          msgNoOptionsAvailable: 'No options available...',
        }}
        fullWidth={fullWidth}
        onChange={handleChange}
      />
    </div>
  );
};

export default AutoComplete;

AutoComplete.propTypes = {
  label: PropTypes.string,
  items: PropTypes.array,
  onChange: PropTypes.func,
  multi: PropTypes.bool,
  clearable: PropTypes.bool,
  searchable: PropTypes.bool,
  creatable: PropTypes.bool,
  disabled: PropTypes.bool,
  fullWidth: PropTypes.bool,
};

AutoComplete.defaultProps = {
  label: '',
  value: null,
  items: [],
  onChange: () => {},
  multi: false,
  searchable: true,
  clearable: true,
  disabled: false,
  creatable: false,
  fullWidth: true,
};

Component test with an external button

const flavours = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
  { value: 'mocha', label: 'Mocha' },
];

const AutoCompleteRewriteValue = () => {
  const [singleValue, setSingleValue] = useState(null);
  const [multiValue, setMultiValue] = useState([]);

  const clearValue = () => {
    setSingleValue(null);
    setMultiValue([]);
  };

  const handleChange = (mode, v) => {
    action('onChange')(v);

    switch (mode) {
      case 'multi':
        setMultiValue(v);
        break;
      case 'single':
        setSingleValue(v);
        break;
      default:
        break;
    }
  };

  return (
    <div>
      <Button onClick={clearValue} color="primary" >Clear</Button>
      <AutoComplete
        value={singleValue}
        label="Flavours (single)"
        items={flavours}
        onChange={v => handleChange('single', v)}
        clearable
        fullWith={false}
      />
      <AutoComplete
        value={multiValue}
        label="Flavours (multi)"
        items={flavours}
        onChange={v => handleChange('multi', v)}
        clearable
        multi
        fullWith={false}
      />
    </div>
  );
};

[iulianraduat]

@frankforpresident thanks for reporting this problem. It was fixed in v6.0.0. Please check if it works now as expected. Thanks for the example. Based on it I created new storybook entries 😀

[frankforpresident]

@iulian-radu-at Awesome! I will try the fix on monday 👌😎

[frankforpresident]

@iulian-radu-at,

The multi select is still missing the clear button when two or more items are selected. The single select is working fine. Overriding the selected values is also working as expected.

Are you running a different versions on different stories in your storybook? Because I can't reproduce this issue on the other clear demo.

[iulianraduat]

@frankforpresident I see that I can reproduce in Storybook on GitHub the problem with the clean button not being displayed when there are changes on multi select. I will investigate why it is still happening. Thanks for checking it 👍

[iulianraduat]

@frankforpresident Please check v6.0.1. It should do the fix for this problem. Thanks

[frankforpresident]

Alright! It works 👍 Thank you for the quick fix

[iulianraduat]

I thank you 💪 😀