feat(mentions): supports 'allowClear' option (#46396)

* feat(mentions): supports 'allowClear' option * feat(mentions): add allowClear testcase * feat(mentions): update package and styles * feat(mentions): update lint and styles * fix: fixed lint error * test: add case for custom clearIcon * feat: add useAllowClear hook * feat: rename useAllowClear to getAllowClear * feat: rename useAllowClear to getAllowClear * feat(mentions): add demo for allowClear * feat(mentions): update demo desc * feat(mentions): update demo desc * feat(mentions): style align middle * feat: add multi line mentions demo and update icon position * feat: fixing visual regression report --------- Co-authored-by: afc163 <afc163@gmail.com>
2024-11-27 12:39:49 +08:00 · 2023-12-25 10:37:26 +08:00 · 2023-12-25 10:37:26 +08:00 · 28aaeafbbc
commit 28aaeafbbc
parent 7a075a5917
11 changed files with 452 additions and 56 deletions
--- a/components/_util/getAllowClear.tsx
+++ b/components/_util/getAllowClear.tsx
@ -0,0 +1,20 @@
+import React from 'react';
+import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
+import type { BaseInputProps } from 'rc-input/lib/interface';
+
+export type AllowClear = BaseInputProps['allowClear'];
+
+const getAllowClear = (allowClear: AllowClear): AllowClear => {
+  let mergedAllowClear: AllowClear;
+  if (typeof allowClear === 'object' && allowClear?.clearIcon) {
+    mergedAllowClear = allowClear;
+  } else if (allowClear) {
+    mergedAllowClear = {
+      clearIcon: <CloseCircleFilled />,
+    };
+  }
+
+  return mergedAllowClear;
+};
+
+export default getAllowClear;
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@ -1,9 +1,7 @@
 import React, { forwardRef, useContext, useEffect, useRef } from 'react';
-import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import classNames from 'classnames';
 import type { InputProps as RcInputProps, InputRef } from 'rc-input';
 import RcInput from 'rc-input';
-import type { BaseInputProps } from 'rc-input/lib/interface';
 import { composeRef } from 'rc-util/lib/ref';

 import type { InputStatus } from '../_util/statusUtils';
@ -21,6 +19,7 @@ import { hasPrefixSuffix } from './utils';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import type { Variant } from '../form/hooks/useVariants';
 import useVariant from '../form/hooks/useVariants';
+import getAllowClear from '../_util/getAllowClear';

 export interface InputFocusOptions extends FocusOptions {
  cursor?: 'start' | 'end' | 'all';
@ -173,14 +172,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
    </>
  );

-  // Allow clear
-  let mergedAllowClear: BaseInputProps['allowClear'];
-  if (typeof allowClear === 'object' && allowClear?.clearIcon) {
-    mergedAllowClear = allowClear;
-  } else if (allowClear) {
-    mergedAllowClear = { clearIcon: <CloseCircleFilled /> };
-  }
-
+  const mergedAllowClear = getAllowClear(allowClear);
  const [variant, enableVariantCls] = useVariant(customVariant, bordered);

  return wrapCSSVar(
--- a/components/mentions/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/mentions/tests/snapshots/demo-extend.test.ts.snap
@ -1,5 +1,148 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`renders components/mentions/demo/allowClear.tsx extend context correctly 1`] = `
+Array [
+  <span
+    class="ant-mentions-affix-wrapper ant-mentions-outlined"
+  >
+    <div
+      class="ant-mentions"
+    >
+      <textarea
+        class="rc-textarea"
+        rows="1"
+      >
+        hello world
+      </textarea>
+    </div>
+    <span
+      class="ant-mentions-suffix"
+    >
+      <span
+        class="ant-mentions-clear-icon"
+        role="button"
+        tabindex="-1"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            fill-rule="evenodd"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+  </span>,
+  <br />,
+  <br />,
+  <span
+    class="ant-mentions-affix-wrapper ant-mentions-outlined"
+  >
+    <div
+      class="ant-mentions"
+    >
+      <textarea
+        class="rc-textarea"
+        rows="1"
+      >
+        hello world
+      </textarea>
+    </div>
+    <span
+      class="ant-mentions-suffix"
+    >
+      <span
+        class="ant-mentions-clear-icon"
+        role="button"
+        tabindex="-1"
+      >
+        <span
+          aria-label="close-square"
+          class="anticon anticon-close-square"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-square"
+            fill="currentColor"
+            fill-rule="evenodd"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 112c17.7 0 32 14.3 32 32v736c0 17.7-14.3 32-32 32H144c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32zM639.98 338.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+  </span>,
+  <br />,
+  <br />,
+  <span
+    class="ant-mentions-affix-wrapper ant-mentions-outlined"
+  >
+    <div
+      class="ant-mentions"
+    >
+      <textarea
+        class="rc-textarea"
+        rows="3"
+      >
+        hello world
+      </textarea>
+    </div>
+    <span
+      class="ant-mentions-suffix"
+    >
+      <span
+        class="ant-mentions-clear-icon"
+        role="button"
+        tabindex="-1"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            fill-rule="evenodd"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+  </span>,
+]
+`;
+
+exports[`renders components/mentions/demo/allowClear.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/mentions/demo/async.tsx extend context correctly 1`] = `
 <div
  class="ant-mentions ant-mentions-outlined"
--- a/components/mentions/tests/snapshots/demo.test.tsx.snap
+++ b/components/mentions/tests/snapshots/demo.test.tsx.snap
@ -1,5 +1,146 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`renders components/mentions/demo/allowClear.tsx correctly 1`] = `
+Array [
+  <span
+    class="ant-mentions-affix-wrapper ant-mentions-outlined"
+  >
+    <div
+      class="ant-mentions"
+    >
+      <textarea
+        class="rc-textarea"
+        rows="1"
+      >
+        hello world
+      </textarea>
+    </div>
+    <span
+      class="ant-mentions-suffix"
+    >
+      <span
+        class="ant-mentions-clear-icon"
+        role="button"
+        tabindex="-1"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            fill-rule="evenodd"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+  </span>,
+  <br />,
+  <br />,
+  <span
+    class="ant-mentions-affix-wrapper ant-mentions-outlined"
+  >
+    <div
+      class="ant-mentions"
+    >
+      <textarea
+        class="rc-textarea"
+        rows="1"
+      >
+        hello world
+      </textarea>
+    </div>
+    <span
+      class="ant-mentions-suffix"
+    >
+      <span
+        class="ant-mentions-clear-icon"
+        role="button"
+        tabindex="-1"
+      >
+        <span
+          aria-label="close-square"
+          class="anticon anticon-close-square"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-square"
+            fill="currentColor"
+            fill-rule="evenodd"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 112c17.7 0 32 14.3 32 32v736c0 17.7-14.3 32-32 32H144c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32zM639.98 338.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+  </span>,
+  <br />,
+  <br />,
+  <span
+    class="ant-mentions-affix-wrapper ant-mentions-outlined"
+  >
+    <div
+      class="ant-mentions"
+    >
+      <textarea
+        class="rc-textarea"
+        rows="3"
+      >
+        hello world
+      </textarea>
+    </div>
+    <span
+      class="ant-mentions-suffix"
+    >
+      <span
+        class="ant-mentions-clear-icon"
+        role="button"
+        tabindex="-1"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            fill-rule="evenodd"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+  </span>,
+]
+`;
+
 exports[`renders components/mentions/demo/async.tsx correctly 1`] = `
 <div
  class="ant-mentions ant-mentions-outlined"
--- a/components/mentions/tests/index.test.tsx
+++ b/components/mentions/tests/index.test.tsx
@ -85,6 +85,20 @@ describe('Mentions', () => {
    expect(wrapper.container.querySelectorAll('.bamboo-light').length).toBeTruthy();
  });

+  it('allowClear', () => {
+    const wrapper = render(<Mentions allowClear />);
+    simulateInput(wrapper, '111');
+    const textareaInstance = wrapper.container.querySelector('textarea')!;
+    expect(textareaInstance.value).toEqual('111');
+    fireEvent.click(wrapper.container.querySelector('.ant-mentions-clear-icon')!);
+    expect(textareaInstance.value).toEqual('');
+  });
+
+  it('should support custom clearIcon', () => {
+    const { container } = render(<Mentions allowClear={{ clearIcon: 'clear' }} />);
+    expect(container.querySelector('.ant-mentions-clear-icon')?.textContent).toBe('clear');
+  });
+
  it('warning if use Mentions.Option', () => {
    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
    render(
--- a/components/mentions/demo/allowClear.md
+++ b/components/mentions/demo/allowClear.md
@ -0,0 +1,7 @@
+## zh-CN
+
+自定义清除按钮。
+
+## en-US
+
+Customize clear button.
--- a/components/mentions/demo/allowClear.tsx
+++ b/components/mentions/demo/allowClear.tsx
@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { CloseSquareFilled } from '@ant-design/icons';
+import { Mentions } from 'antd';
+
+const App: React.FC = () => {
+  const [value, setValue] = useState('hello world');
+  return (
+    <>
+      <Mentions value={value} onChange={setValue} allowClear />
+      <br />
+      <br />
+      <Mentions
+        value={value}
+        onChange={setValue}
+        allowClear={{ clearIcon: <CloseSquareFilled /> }}
+      />
+      <br />
+      <br />
+      <Mentions value={value} onChange={setValue} allowClear rows={3} />
+    </>
+  );
+};
+
+export default App;
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@ -41,6 +41,7 @@ return (
 <code src="./demo/prefix.tsx">Customize Trigger Token</code>
 <code src="./demo/readonly.tsx">disabled or readOnly</code>
 <code src="./demo/placement.tsx">Placement</code>
+<code src="./demo/allowClear.tsx">With clear icon</code>
 <code src="./demo/autoSize.tsx">autoSize</code>
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
@ -54,6 +55,7 @@ Common props ref：[Common props](/docs/react/common-props)

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| allowClear | Show clear button | boolean \| { clearIcon?: ReactNode } | false | 5.13.0 |
 | autoFocus | Auto get focus when component mounted | boolean | false |  |
 | autoSize | Textarea height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false |  |
 | defaultValue | Default value | string | - |  |
--- a/components/mentions/index.tsx
+++ b/components/mentions/index.tsx
@ -21,6 +21,7 @@ import useStyle from './style';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import type { Variant } from '../form/hooks/useVariants';
 import useVariant from '../form/hooks/useVariants';
+import getAllowClear from '../_util/getAllowClear';

 export const { Option } = RcMentions;

@ -86,6 +87,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
    notFoundContent,
    options,
    status: customStatus,
+    allowClear = false,
    popupClassName,
    style,
    variant: customVariant,
@ -162,6 +164,8 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps

  const prefixCls = getPrefixCls('mentions', customizePrefixCls);

+  const mergedAllowClear = getAllowClear(allowClear);
+
  // Style
  const rootCls = useCSSVarCls(prefixCls);
  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
@ -185,6 +189,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
      notFoundContent={notFoundContentEle}
      className={mergedClassName}
      disabled={disabled}
+      allowClear={mergedAllowClear}
      direction={direction}
      style={{ ...contextMentions?.style, ...style }}
      {...restProps}
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@ -42,6 +42,7 @@ return (
 <code src="./demo/prefix.tsx">自定义触发字符</code>
 <code src="./demo/readonly.tsx">无效或只读</code>
 <code src="./demo/placement.tsx">向上展开</code>
+<code src="./demo/allowClear.tsx">带移除图标</code>
 <code src="./demo/autoSize.tsx">自动大小</code>
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
@ -55,6 +56,7 @@ return (

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| allowClear | 支持清除 | boolean \| { clearIcon?: ReactNode } | false | 5.13.0 |
 | autoFocus | 自动获得焦点 | boolean | false |  |
 | autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |  |
 | defaultValue | 默认值 | string | - |  |
--- a/components/mentions/style/index.ts
+++ b/components/mentions/style/index.ts
@ -52,12 +52,17 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
    paddingInline,
    paddingBlock,
    fontSize,
+    fontSizeIcon,
+    colorTextTertiary,
+    colorTextQuaternary,
    colorBgElevated,
    paddingXXS,
+    paddingLG,
    borderRadius,
    borderRadiusLG,
    boxShadowSecondary,
    itemPaddingVertical,
+    calc,
  } = token;

  return {
@ -81,8 +86,16 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {

      '&-affix-wrapper': {
        ...genBasicInputStyle(token),
+        display: 'inline-flex',
        padding: 0,

+        '&::before': {
+          display: 'inline-block',
+          width: 0,
+          visibility: 'hidden',
+          content: '"\\a0"',
+        },
+
        [`${componentCls}-suffix`]: {
          position: 'absolute',
          top: 0,
@ -93,6 +106,37 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
          alignItems: 'center',
          margin: 'auto',
        },
+
+        [`&:has(${componentCls}-suffix) > ${componentCls} > textarea`]: {
+          paddingInlineEnd: paddingLG,
+        },
+
+        [`${componentCls}-clear-icon`]: {
+          position: 'absolute',
+          insetInlineEnd: 0,
+          insetBlockStart: calc(fontSize).mul(lineHeight).mul(0.5).add(paddingBlock).equal(),
+          transform: `translateY(-50%)`,
+          margin: 0,
+          color: colorTextQuaternary,
+          fontSize: fontSizeIcon,
+          verticalAlign: -1,
+          // https://github.com/ant-design/ant-design/pull/18151
+          // https://codesandbox.io/s/wizardly-sun-u10br
+          cursor: 'pointer',
+          transition: `color ${motionDurationSlow}`,
+
+          '&:hover': {
+            color: colorTextTertiary,
+          },
+
+          '&:active': {
+            color: colorText,
+          },
+
+          '&-hidden': {
+            visibility: 'hidden',
+          },
+        },
      },

      '&-disabled': {
@ -102,55 +146,57 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
      },

      // ================= Input Area =================
-      [`> textarea, ${componentCls}-measure`]: {
-        color: colorText,
-        boxSizing: 'border-box',
-        minHeight: token.calc(controlHeight).sub(2),
-        margin: 0,
-        padding: `${unit(paddingBlock)} ${unit(paddingInline)}`,
-        overflow: 'inherit',
-        overflowX: 'hidden',
-        overflowY: 'auto',
-        fontWeight: 'inherit',
-        fontSize: 'inherit',
-        fontFamily: 'inherit',
-        fontStyle: 'inherit',
-        fontVariant: 'inherit',
-        fontSizeAdjust: 'inherit',
-        fontStretch: 'inherit',
-        lineHeight: 'inherit',
-        direction: 'inherit',
-        letterSpacing: 'inherit',
-        whiteSpace: 'inherit',
-        textAlign: 'inherit',
-        verticalAlign: 'top',
-        wordWrap: 'break-word',
-        wordBreak: 'inherit',
-        tabSize: 'inherit',
-      },
+      [`&, &-affix-wrapper > ${componentCls}`]: {
+        [`> textarea, ${componentCls}-measure`]: {
+          color: colorText,
+          boxSizing: 'border-box',
+          minHeight: token.calc(controlHeight).sub(2),
+          margin: 0,
+          padding: `${unit(paddingBlock)} ${unit(paddingInline)}`,
+          overflow: 'inherit',
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          fontWeight: 'inherit',
+          fontSize: 'inherit',
+          fontFamily: 'inherit',
+          fontStyle: 'inherit',
+          fontVariant: 'inherit',
+          fontSizeAdjust: 'inherit',
+          fontStretch: 'inherit',
+          lineHeight: 'inherit',
+          direction: 'inherit',
+          letterSpacing: 'inherit',
+          whiteSpace: 'inherit',
+          textAlign: 'inherit',
+          verticalAlign: 'top',
+          wordWrap: 'break-word',
+          wordBreak: 'inherit',
+          tabSize: 'inherit',
+        },

-      '> textarea': {
-        width: '100%',
-        border: 'none',
-        outline: 'none',
-        resize: 'none',
-        backgroundColor: 'transparent',
-        ...genPlaceholderStyle(token.colorTextPlaceholder),
-      },
+        '> textarea': {
+          width: '100%',
+          border: 'none',
+          outline: 'none',
+          resize: 'none',
+          backgroundColor: 'transparent',
+          ...genPlaceholderStyle(token.colorTextPlaceholder),
+        },

-      [`${componentCls}-measure`]: {
-        position: 'absolute',
-        top: 0,
-        insetInlineEnd: 0,
-        bottom: 0,
-        insetInlineStart: 0,
-        zIndex: -1,
-        color: 'transparent',
-        pointerEvents: 'none',
+        [`${componentCls}-measure`]: {
+          position: 'absolute',
+          top: 0,
+          insetInlineEnd: 0,
+          bottom: 0,
+          insetInlineStart: 0,
+          zIndex: -1,
+          color: 'transparent',
+          pointerEvents: 'none',

-        '> span': {
-          display: 'inline-block',
-          minHeight: '1em',
+          '> span': {
+            display: 'inline-block',
+            minHeight: '1em',
+          },
        },
      },