Antd new icon in select is not clickable

Question

I have Select from antd styled with styled components with different icon. Everything works perfectly, except click on new icon inside of select doesn't trigger the dropdown to open or close.

   <Styled.SortSelect
      size={size ? size : 'large'}
      defaultValue={defaultValue}
      suffixIcon={<Styled.Icon />}
      getPopupContainer={trigger => {
        return trigger;
      }}
    >
      {options.map((option: string) => {
        return (
          <Styled.SortOption className="custom-option" data-testid="sort-option" key={option} value={option}>
            {option}
          </Styled.SortOption>
        );
      })}
    </Styled.SortSelect>

Simple demo

https://codesandbox.io/s/broken-arrow-click-nfpc7?file=/src/index.tsx

Answer 1

I think it's a bug. But in the meantime a workaround could be to handle whether the select is open yourself via an onClick on the icon like this:

export const SortSelect = ({ defaultValue, size, options }: Props) => {
  const [open, setOpen] = useState(false);
  return (
    <Styled.SortSelect
      size={size ? size : "large"}
      defaultValue={defaultValue}
      suffixIcon={<Styled.Icon onClick={() => setOpen(!open)} />}
      open={open}
      getPopupContainer={trigger => {
        return trigger;
      }}
    >
      {options.map((option: string) => {
        return (
          <Styled.SortOption
            className="custom-option"
            data-testid="sort-option"
            key={option}
            value={option}
          >
            {option}
          </Styled.SortOption>
        );
      })}
    </Styled.SortSelect>
  );
};