选择中的Antd新图标不可点击

问题描述

我已从antd样式中选择了带有不同图标的样式化组件。一切正常，只是单击select内的新图标不会触发下拉菜单以打开或关闭。

   <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>

简单演示

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

解决方法

我认为这是一个错误。但是与此同时，一种变通方法可能是处理是否通过图标上的onClick自己打开选择，如下所示：

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>
  );
};

,

这似乎是一个错误。切换到较旧的antd版本，例如4.1.3似乎可以解决您的错误