ant-design中Input输入框在获取焦点时由于保留了上次输入内容而莫名出现了一个黑色背景的选择提示框，且选择提示框中的值后还会出现蓝色背景

一. 代码环境

“react”: “18.1.0”,
“antd”: “^4.20.5”,
“typescript”: “4.6.4”

二. 问题描述

ant-design-react中，Form组件里有个子组件Input，在Input组件获取焦点时，由于保存了上次的输入内容，显示出了一个提示框，背景是黑色，且提示框可以选择里面的内容。如下图：

当选中输入框的内容后，Input输入框会出现一个蓝色背景，如下图：

相关代码如下：

<Form layout='vertical' onFinish={onFinish}>
  {/* Task target start */}
  <Form.Item
    label='Task target'
    tooltip={getTooltipValue(
      '* TIP: The task target should be as clear as possible and can be quantified. The description needs to include the specific tasks completed and the corresponding number of rewards.',
      '424px'
    )}
    name='taskTarget'
    rules={[
      { required: true, message: 'Please enter task target' },
      {
        pattern: /^[a-zA-Z0-9_]+$/,
        message: 'The task objective must be composed of English, numbers or underscores',
       },
     ]}
   >
     <Input
       bordered={false}
       className={'common-style'}
       showCount
       maxLength={64}
       placeholder='Place an order at my shop store, no refundy'
      />
   </Form.Item>
 </Form>

三. 解决办法

3.1 若保留当前黑色的提示框，且去掉选中值后出现的蓝色背景

只需要修改对应的样式，把下面的CSS样式加到全局或当前页面即可

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  // -webkit-text-fill-color: #2a2d33;
  transition: background-color 5000s ease-out 0.5s;
}

如下图，当我们选中黑色提示框中的值后，也不会出现蓝色背景了

3.2 直接去除该提示框，不让黑色提示框显示

给input加上autoComplete="off"属性，让输入框不要记录输入的信息，代码如下：

<Form layout='vertical' onFinish={onFinish}>
  {/* Task target start */}
  <Form.Item
    label='Task target'
    tooltip={getTooltipValue(
      '* TIP: The task target should be as clear as possible and can be quantified. The description needs to include the specific tasks completed and the corresponding number of rewards.',
      '424px'
    )}
    name='taskTarget'
    rules={[
      { required: true, message: 'Please enter task target' },
      {
        pattern: /^[a-zA-Z0-9_]+$/,
        message: 'The task objective must be composed of English, numbers or underscores',
       },
     ]}
   >
     <Input
       autoComplete='off'
       bordered={false}
       className={'common-style'}
       showCount
       maxLength={64}
       placeholder='Place an order at my shop store, no refundy'
      />
   </Form.Item>
 </Form>

效果如下：输入框在获取焦点时，不再出现黑色提示框

（完）