React-select: Providing DownChevron in components doesn't work

[SpadarShut]

The docs say that

The following components are customisable and switchable:

• ...
• DownChevron
• ...
  https://react-select.com/components#components

But passing DownChevron in components prop doesn't do anything, here's an example https://codesandbox.io/s/react-codesandboxer-example-jvo50.
Is it docs wrong or something's broken?

[buszmen201]

works for me with DropdownIndicator prop

const Icon = ({ innerRef, innerProps }) => (
  <span role="img" aria-label="Dropdown emoji" ref={innerRef} {...innerProps}>
    👇
  </span>
);
const components = {
  DropdownIndicator: Icon,
};
export default class SingleSelect extends Component {
  render() {
    return (
      <Select
        className="basic-single"
        classNamePrefix="select"
        name="color"
        options={colourOptions}
        components={components}
      />
    );
  }
}

[tpict]

I'd classify this as a bug–see https://github.com/JedWatson/react-select/blob/37507834fa8bceeeca20e848e6c9b8aeffcd520c/packages/react-select/src/components/indicators.js#L89
The reference to DownChevron is hardcoded instead of being pulled out of props

[jamesmoss]

The exact same issue also affects CrossIcon.

[ayushnawani]

Unable to replace CrossIcon.

[bladey]

Hi all,

What you want to do here is pass in ClearIndicator or DropdownIndicator to replace the cross icon or down chevron as per @buszmen201's suggestion.

The docs are correct and show examples, with Custom ClearIndicator Example and Custom Dropdown Indicator Example on the components page .

See working example here (based off @buszmen201's code): https://codesandbox.io/s/react-codesandboxer-example-yxnpz?file=/example.js:129-146

Let me know if I'm missing something!

[jkbmat]

Hi @bladey,
this is more like a workaround, as for example CrossIcon is also used in MultiValueRemove, so you need to override two components just to get a different looking ❌.

Also the docs are still wrong, because they list ClearIndicator and DropdownIndicator as switchable, when they aren't.

I can live with that if you decide to disregard the PR, just correcting the record.

[bladey]

Thanks for clarifying @jkbmat, much appreciataed, let me take another look!

[andresmatasuarez]

can confirm the exact same happens with CrossIcon. @bladey Any updates on this?