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

react-select/packages/react-select/src/components/indicators.js

Line 89 in 3750783

{children || <DownChevron />}

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?

[yard2010]

Hey,
This issue seems to be stalled, is there anything I can do to help?

[Methuselah96]

@yard2010 There's an existing PR that fixes the issue, but there are some changes that need to be made and it looks like the author might not get to them. If you want, you can create another PR with the requested changes and we'll look into merging it.

[tzs007]

try with built in "components" object like this

import React from "react";
import { components as C } from "react-select";
import Icon from "components/ui/PureIcon";

const ReactSelectDropdownIndicator = (props) => {
  return (
    <div>
      <C.DropdownIndicator {...props}>
        <Icon
          icon={{
            name: "ExpandMore",
            size: "xxs",
            color: "danger",
          }}
        />
      </C.DropdownIndicator>
    </div>
  );
};

export default ReactSelectDropdownIndicator;

C.DropdownIndicator update the original element with this component's children

Sorry for Icon component, it's mine, it's absolutely custom, it's just an example, so feel free to use any other Icon package like react-icons-kit