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' }} />}
 />

点击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' }}
    />
  }
 />

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

或者直接用img标签即可。

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

（完）