ant-design的Select组件采用自定义后缀图标（suffixIcon属性）时，点击该自定义图标没有反应，不会展示下拉菜单的问题

一. 问题原因

自定义图标采用了ant-design的Icon图标组件

我是在ant-design-react的项目中出现的这个问题，估计ant-design-vue中也会这样。

import { CaretDownOutlined } from '@ant-design/icons'
import { Select } from 'antd'

<Select
  size='large'
  showArrow
  bordered={false}
  value={selTransactionType}
  options={transactionOptions}
  onChange={handleTransactionTypeChange}
  suffixIcon={<CaretDownOutlined style={{ fontSize: '15px', color: '#CBD0DB' }} />}
 />
1
2
3
4
5
6
7
8
9
10
11
12

点击Select其他部分都可以展示下拉框，唯独点击图标没有反应。

二. 解决办法

让UI同学将这个箭头切下来，通过标签的形式放上去

import { CaretDownOutlined } from '@ant-design/icons'
import { Select, Image } from 'antd'

<Select
  size='large'
  showArrow
  bordered={false}
  value={selTransactionType}
  options={transactionOptions}
  onChange={handleTransactionTypeChange}
  suffixIcon={
  	<Image
       src={'https://XXXXXXXXXX/date-icon.png'}
       alt='coverImage'
       preview={false}
       style={{ width: '16px', height: '16px' }}
    />
    <img
       src={'https://XXXXXXXXXX/date-icon.png'}
       alt='coverImage'
       style={{ width: '16px', height: '16px' }}
    />
  }
 />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

若是使用ant-design的Image组件，ant-design的Image组件自带预览图片功能，记得需要将preview置为false。

或者直接用img标签即可。

现在不管点击图标还是其他位置都可以展示下拉框了。

（完）