Ant - the design of the Select component using a custom icon (suffixIcon attribute) suffixes, click on the custom ICONS have no reaction, will not display the drop-down menu

一. 问题原因

custom icons are usedant-design的Icon图标组件

我是在ant-design-reactThis problem occurs in the project of ,估计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' }} />}
 />

点击SelectAll other sections can display drop-down boxes,Only clicking on the icon does not respond.

二. 解决办法

让UIThe students cut the arrow out,Put it in the form of a label

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的ImageThe component comes with a preview image function,记得需要将preview置为false.

或者直接用img标签即可.

The dropdown box can now be displayed regardless of whether the icon is clicked or anywhere else.

（完）