From 413e44a170001690a03997d7ec910797f02103a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= <wangning4567@163.com>
Date: Sun, 5 Mar 2023 20:57:49 +0800
Subject: [PATCH 1/2] feat: breadcrumb support items (#40543)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: breadCrumb support  items

* feat: update snap

* feat: 删除部分不支持的test case

* feat: update snap

* feat: update snap

* feat: update snap

* feat: update ts

* feat: update ts

* feat: update ts

* feat: update for reviewer

* doc: update for doc

* doc: update for doc

* doc: replace breadcrumbName to title

* doc: replace breadcrumbName to title

* doc: replace breadcrumbName to title

* chore: adjust separator logic

* refactor: use items

* chore: update logic

* chore: fix routes logic

* chore: fix logic

* chore: clean up

* chore: adjust warning info

* doc: edit test case

* feat: update snap

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>
---
 components/breadcrumb/Breadcrumb.tsx          | 211 ++++++++++++------
 components/breadcrumb/BreadcrumbItem.tsx      |  54 ++++-
 .../breadcrumb/__tests__/Breadcrumb.test.tsx  | 202 +++++++++++++----
 .../__snapshots__/Breadcrumb.test.tsx.snap    |  74 +++---
 .../__snapshots__/demo-extend.test.ts.snap    | 171 ++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap |  54 +++++
 .../__snapshots__/router.test.tsx.snap        |  48 ++--
 components/breadcrumb/demo/basic.tsx          |  26 ++-
 components/breadcrumb/demo/debug-routes.md    |   7 +
 components/breadcrumb/demo/debug-routes.tsx   |  27 +++
 components/breadcrumb/demo/overlay.tsx        |  29 ++-
 components/breadcrumb/demo/react-router.tsx   |  18 +-
 .../breadcrumb/demo/separator-component.md    |   4 +-
 .../breadcrumb/demo/separator-component.tsx   |  40 +++-
 components/breadcrumb/demo/separator.tsx      |  25 ++-
 components/breadcrumb/demo/withIcon.tsx       |  32 ++-
 components/breadcrumb/index.en-US.md          |  79 ++++---
 components/breadcrumb/index.ts                |   2 +-
 components/breadcrumb/index.zh-CN.md          |  80 ++++---
 components/breadcrumb/useItems.ts             |  43 ++++
 20 files changed, 905 insertions(+), 321 deletions(-)
 create mode 100644 components/breadcrumb/demo/debug-routes.md
 create mode 100644 components/breadcrumb/demo/debug-routes.tsx
 create mode 100644 components/breadcrumb/useItems.ts

diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx
index 9d7d5413fe..41ccb65166 100755
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -1,9 +1,8 @@
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
-import type { DropdownProps } from '../dropdown';
-import Menu from '../menu';
 import { cloneElement } from '../_util/reactNode';
 import warning from '../_util/warning';
 import type { BreadcrumbItemProps } from './BreadcrumbItem';
@@ -11,63 +10,92 @@ import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 
 import useStyle from './style';
+import useItems from './useItems';
 
+/** @deprecated New of Breadcrumb using `items` instead of `routes` */
 export interface Route {
   path: string;
   breadcrumbName: string;
   children?: Omit<Route, 'children'>[];
 }
 
-export interface BreadcrumbProps {
+export interface BreadcrumbItemType {
+  key?: React.Key;
+  /**
+   * Different with `path`. Directly set the link of this item.
+   */
+  href?: string;
+  /**
+   * Different with `href`. It will concat all prev `path` to the current one.
+   */
+  path?: string;
+  title: React.ReactNode;
+  menu?: BreadcrumbItemProps['menu'];
+  /** @deprecated Please use `menu` instead */
+  overlay?: React.ReactNode;
+}
+export interface BreadcrumbSeparatorType {
+  type: 'separator';
+  separator?: React.ReactNode;
+}
+
+export type ItemType = BreadcrumbItemType | BreadcrumbSeparatorType;
+
+type InternalRouteType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
+
+export interface BaseBreadcrumbProps {
   prefixCls?: string;
-  routes?: Route[];
   params?: any;
   separator?: React.ReactNode;
-  itemRender?: (
-    route: Route,
-    params: any,
-    routes: Array<Route>,
-    paths: Array<string>,
-  ) => React.ReactNode;
   style?: React.CSSProperties;
   className?: string;
   rootClassName?: string;
   children?: React.ReactNode;
 }
 
-function getBreadcrumbName(route: Route, params: any) {
-  if (!route.breadcrumbName) {
+export interface LegacyBreadcrumbProps extends BaseBreadcrumbProps {
+  /** @deprecated Please use `items` instead */
+  routes: Route[];
+
+  itemRender?: (route: Route, params: any, routes: Route[], paths: string[]) => React.ReactNode;
+}
+
+export interface NewBreadcrumbProps extends BaseBreadcrumbProps {
+  items: ItemType[];
+
+  itemRender?: (
+    route: ItemType,
+    params: any,
+    routes: ItemType[],
+    paths: string[],
+  ) => React.ReactNode;
+}
+
+export type BreadcrumbProps = BaseBreadcrumbProps | LegacyBreadcrumbProps | NewBreadcrumbProps;
+
+function getBreadcrumbName(route: InternalRouteType, params: any) {
+  if (route.title === undefined) {
     return null;
   }
   const paramsKeys = Object.keys(params).join('|');
-  const name = route.breadcrumbName.replace(
-    new RegExp(`:(${paramsKeys})`, 'g'),
-    (replacement, key) => params[key] || replacement,
-  );
-  return name;
+  return typeof route.title === 'object'
+    ? route.title
+    : String(route.title).replace(
+        new RegExp(`:(${paramsKeys})`, 'g'),
+        (replacement, key) => params[key] || replacement,
+      );
 }
 
-function defaultItemRender(route: Route, params: any, routes: Route[], paths: string[]) {
-  const isLastItem = routes.indexOf(route) === routes.length - 1;
-  const name = getBreadcrumbName(route, params);
-  return isLastItem ? <span>{name}</span> : <a href={`#/${paths.join('/')}`}>{name}</a>;
-}
-
-const getPath = (path: string, params: any) => {
-  path = (path || '').replace(/^\//, '');
-  Object.keys(params).forEach((key) => {
-    path = path.replace(`:${key}`, params[key]);
-  });
-  return path;
-};
-
-const addChildPath = (paths: string[], childPath: string, params: any) => {
-  const originalPaths = [...paths];
-  const path = getPath(childPath || '', params);
-  if (path) {
-    originalPaths.push(path);
+const getPath = (params: any, path?: string) => {
+  if (path === undefined) {
+    return path;
   }
-  return originalPaths;
+
+  let mergedPath = (path || '').replace(/^\//, '');
+  Object.keys(params).forEach((key) => {
+    mergedPath = mergedPath.replace(`:${key}`, params[key]!);
+  });
+  return mergedPath;
 };
 
 type CompoundedComponent = React.FC<BreadcrumbProps> & {
@@ -75,55 +103,87 @@ type CompoundedComponent = React.FC<BreadcrumbProps> & {
   Separator: typeof BreadcrumbSeparator;
 };
 
-const Breadcrumb: CompoundedComponent = ({
-  prefixCls: customizePrefixCls,
-  separator = '/',
-  style,
-  className,
-  rootClassName,
-  routes,
-  children,
-  itemRender = defaultItemRender,
-  params = {},
-  ...restProps
-}) => {
+const Breadcrumb: CompoundedComponent = (props) => {
+  const {
+    prefixCls: customizePrefixCls,
+    separator = '/',
+    style,
+    className,
+    rootClassName,
+    routes: legacyRoutes,
+    items,
+    children,
+    itemRender,
+    params = {},
+    ...restProps
+  } = props as LegacyBreadcrumbProps & NewBreadcrumbProps;
+
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
 
   let crumbs: React.ReactNode;
   const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
-  if (routes && routes.length > 0) {
+  const mergedItems = useItems(items, legacyRoutes);
+
+  if (process.env.NODE_ENV !== 'production') {
+    warning(!legacyRoutes, 'Breadcrumb', '`routes` is deprecated. Please use `items` instead.');
+  }
+
+  const mergedItemRender =
+    itemRender ||
+    ((route: BreadcrumbItemType) => {
+      const name = getBreadcrumbName(route, params);
+
+      return name;
+    });
+
+  if (mergedItems && mergedItems.length > 0) {
     // generated by route
     const paths: string[] = [];
-    crumbs = routes.map((route) => {
-      const path = getPath(route.path, params);
 
-      if (path) {
-        paths.push(path);
-      }
-      // generated overlay by route.children
-      let overlay: DropdownProps['overlay'];
-      if (route.children && route.children.length) {
-        overlay = (
-          <Menu
-            items={route.children.map((child) => ({
-              key: child.path || child.breadcrumbName,
-              label: itemRender(child, params, routes, addChildPath(paths, child.path, params)),
-            }))}
-          />
-        );
+    const itemRenderRoutes: any = items || legacyRoutes;
+
+    crumbs = mergedItems.map((item, index) => {
+      const { path, key, type, menu, overlay, separator: itemSeparator } = item;
+      const mergedPath = getPath(params, path);
+
+      if (mergedPath !== undefined) {
+        paths.push(mergedPath);
       }
 
-      const itemProps: BreadcrumbItemProps = { separator };
+      const mergedKey = key ?? index;
 
-      if (overlay) {
-        itemProps.overlay = overlay;
+      if (type === 'separator') {
+        return <BreadcrumbSeparator key={mergedKey}>{itemSeparator}</BreadcrumbSeparator>;
+      }
+
+      const itemProps: BreadcrumbItemProps = {};
+      const isLastItem = index === mergedItems.length - 1;
+
+      if (menu) {
+        itemProps.menu = menu;
+      } else if (overlay) {
+        itemProps.overlay = overlay as any;
+      }
+
+      let { href } = item;
+      if (paths.length && mergedPath !== undefined) {
+        href = `#/${paths.join('/')}`;
       }
 
       return (
-        <BreadcrumbItem {...itemProps} key={path || route.breadcrumbName}>
-          {itemRender(route, params, routes, paths)}
+        <BreadcrumbItem
+          key={mergedKey}
+          {...itemProps}
+          {...pickAttrs(item, {
+            data: true,
+            aria: true,
+          })}
+          href={href}
+          separator={isLastItem ? '' : separator}
+        >
+          {mergedItemRender(item as BreadcrumbItemType, params, itemRenderRoutes, paths)}
         </BreadcrumbItem>
       );
     });
@@ -133,7 +193,14 @@ const Breadcrumb: CompoundedComponent = ({
       if (!element) {
         return element;
       }
-
+      // =================== Warning =====================
+      if (process.env.NODE_ENV !== 'production') {
+        warning(
+          !element,
+          'Breadcrumb',
+          '`Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `items` instead.',
+        );
+      }
       warning(
         element.type &&
           (element.type.__ANT_BREADCRUMB_ITEM === true ||
diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx
index 8cc33f3670..1ec40badf5 100644
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -1,21 +1,34 @@
-import * as React from 'react';
 import DownOutlined from '@ant-design/icons/DownOutlined';
-import warning from '../_util/warning';
+import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import type { DropdownProps } from '../dropdown/dropdown';
 import Dropdown from '../dropdown/dropdown';
+import warning from '../_util/warning';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 
-export interface BreadcrumbItemProps {
-  prefixCls?: string;
+export interface SeparatorType {
   separator?: React.ReactNode;
+  key?: React.Key;
+}
+
+type MenuType = DropdownProps['menu'];
+interface MenuItem {
+  title?: React.ReactNode;
+  label?: React.ReactNode;
+  path?: string;
   href?: string;
-  menu?: DropdownProps['menu'];
+}
+
+export interface BreadcrumbItemProps extends SeparatorType {
+  prefixCls?: string;
+  href?: string;
+  menu?: Omit<MenuType, 'items'> & {
+    items?: MenuItem[];
+  };
   dropdownProps?: DropdownProps;
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
   className?: string;
   children?: React.ReactNode;
-
   // Deprecated
   /** @deprecated Please use `menu` instead */
   overlay?: DropdownProps['overlay'];
@@ -31,6 +44,7 @@ const BreadcrumbItem: CompoundedComponent = (props: BreadcrumbItemProps) => {
     menu,
     overlay,
     dropdownProps,
+    href,
     ...restProps
   } = props;
 
@@ -52,11 +66,31 @@ const BreadcrumbItem: CompoundedComponent = (props: BreadcrumbItemProps) => {
       const mergeDropDownProps: DropdownProps = {
         ...dropdownProps,
       };
-      if ('overlay' in props) {
+
+      if (menu) {
+        const { items, ...menuProps } = menu! || {};
+        mergeDropDownProps.menu = {
+          ...menuProps,
+          items: items?.map(({ title, label, path, ...itemProps }, index) => {
+            let mergedLabel: React.ReactNode = label ?? title;
+
+            if (path) {
+              mergedLabel = <a href={`${href}${path}`}>{mergedLabel}</a>;
+            }
+
+            return {
+              ...itemProps,
+              key: index,
+              label: mergedLabel as string,
+            };
+          }),
+        };
+      } else if (overlay) {
         mergeDropDownProps.overlay = overlay;
       }
+
       return (
-        <Dropdown menu={menu} placement="bottom" {...mergeDropDownProps}>
+        <Dropdown placement="bottom" {...mergeDropDownProps}>
           <span className={`${prefixCls}-overlay-link`}>
             {breadcrumbItem}
             <DownOutlined />
@@ -68,9 +102,9 @@ const BreadcrumbItem: CompoundedComponent = (props: BreadcrumbItemProps) => {
   };
 
   let link: React.ReactNode;
-  if ('href' in restProps) {
+  if (href !== undefined) {
     link = (
-      <a className={`${prefixCls}-link`} {...restProps}>
+      <a className={`${prefixCls}-link`} href={href} {...restProps}>
         {children}
       </a>
     );
diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.tsx b/components/breadcrumb/__tests__/Breadcrumb.test.tsx
index b7b88845cc..af702de28d 100644
--- a/components/breadcrumb/__tests__/Breadcrumb.test.tsx
+++ b/components/breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -3,7 +3,8 @@ import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { render } from '../../../tests/utils';
-import type { Route } from '../Breadcrumb';
+import { resetWarned } from '../../_util/warning';
+import type { ItemType } from '../Breadcrumb';
 import Breadcrumb from '../index';
 
 describe('Breadcrumb', () => {
@@ -33,22 +34,96 @@ describe('Breadcrumb', () => {
     );
   });
 
-  it('overlay deprecation warning', () => {
+  it('warns on routes', () => {
+    render(
+      <Breadcrumb
+        routes={[
+          {
+            breadcrumbName: 'yyy',
+          } as any,
+        ]}
+      />,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Breadcrumb] `routes` is deprecated. Please use `items` instead.',
+    );
+  });
+
+  it('should render correct', () => {
+    const { asFragment } = render(
+      <Breadcrumb
+        items={[
+          {
+            path: '',
+            title: <span>xxx</span>,
+          },
+          {
+            title: 'yyy',
+          },
+        ]}
+      />,
+    );
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
+
+  describe('overlay deprecation warning set', () => {
+    it('legacy jsx', () => {
+      resetWarned();
+      render(
+        <Breadcrumb>
+          <Breadcrumb.Item overlay={<div>menu</div>}>
+            <a href="">General</a>
+          </Breadcrumb.Item>
+        </Breadcrumb>,
+      );
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
+      );
+    });
+
+    it('items', () => {
+      resetWarned();
+      render(
+        <Breadcrumb
+          items={[
+            {
+              overlay: <div>menu</div>,
+              title: 'General',
+            },
+          ]}
+        />,
+      );
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
+      );
+    });
+  });
+
+  it('Breadcrumb.Item deprecation warning', () => {
     render(
       <Breadcrumb>
-        <Breadcrumb.Item overlay={<div>menu</div>}>
-          <a href="">General</a>
-        </Breadcrumb.Item>
+        <Breadcrumb.Item>Location</Breadcrumb.Item>
       </Breadcrumb>,
     );
     expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
+      'Warning: [antd: Breadcrumb] `Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `items` instead.',
+    );
+  });
+
+  it('Breadcrumb.separator deprecation warning', () => {
+    render(
+      <Breadcrumb>
+        <Breadcrumb.Separator>:</Breadcrumb.Separator>
+      </Breadcrumb>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Breadcrumb] `Breadcrumb.Item and Breadcrumb.Separator` is deprecated. Please use `items` instead.',
     );
   });
 
   // https://github.com/ant-design/ant-design/issues/40204
   it('wrong overlay deprecation warning in Dropdown', () => {
-    const items = [
+    const menuItems = [
       {
         key: '1',
         label: (
@@ -59,11 +134,14 @@ describe('Breadcrumb', () => {
       },
     ];
     render(
-      <Breadcrumb>
-        <Breadcrumb.Item menu={{ items }}>
-          <a href="">General</a>
-        </Breadcrumb.Item>
-      </Breadcrumb>,
+      <Breadcrumb
+        items={[
+          {
+            menu: { items: menuItems },
+            title: <a href="">General</a>,
+          },
+        ]}
+      />,
     );
     expect(errorSpy).not.toHaveBeenCalledWith(
       'Warning: [antd: Dropdown] `overlay` is deprecated. Please use `menu` instead.',
@@ -79,18 +157,23 @@ describe('Breadcrumb', () => {
         {undefined}
       </Breadcrumb>,
     );
-    expect(errorSpy).not.toHaveBeenCalled();
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   // https://github.com/ant-design/ant-design/issues/5542
   it('should not display Breadcrumb Item when its children is falsy', () => {
     const { asFragment } = render(
-      <Breadcrumb>
-        <Breadcrumb.Item />
-        <Breadcrumb.Item>xxx</Breadcrumb.Item>
-        <Breadcrumb.Item>yyy</Breadcrumb.Item>
-      </Breadcrumb>,
+      <Breadcrumb
+        items={[
+          {} as any,
+          {
+            title: 'xxx',
+          },
+          {
+            title: 'yyy',
+          },
+        ]}
+      />,
     );
     expect(asFragment().firstChild).toMatchSnapshot();
   });
@@ -111,53 +194,66 @@ describe('Breadcrumb', () => {
   });
 
   it('should render a menu', () => {
-    const routes: Route[] = [
+    const items: ItemType[] = [
       {
         path: 'index',
-        breadcrumbName: 'home',
+        title: 'home',
       },
       {
         path: 'first',
-        breadcrumbName: 'first',
-        children: [
-          {
-            path: '/general',
-            breadcrumbName: 'General',
-          },
-          {
-            path: '/layout',
-            breadcrumbName: 'Layout',
-          },
-          {
-            path: '/navigation',
-            breadcrumbName: 'Navigation',
-          },
-        ],
+        title: 'first',
+        menu: {
+          items: [
+            {
+              path: '/general',
+              title: 'General',
+            },
+            {
+              path: '/layout',
+              title: 'Layout',
+            },
+            {
+              path: '/navigation',
+              title: 'Navigation',
+            },
+          ],
+        },
       },
       {
         path: 'second',
-        breadcrumbName: 'second',
+        title: 'second',
       },
       {
         path: 'third',
-        breadcrumbName: '',
+        title: '',
       },
     ];
-    const { asFragment } = render(<Breadcrumb routes={routes} />);
+    const { asFragment } = render(<Breadcrumb items={items} />);
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it('should accept undefined routes', () => {
-    const { asFragment } = render(<Breadcrumb routes={undefined} />);
+  it('should accept undefined items', () => {
+    const { asFragment } = render(<Breadcrumb items={undefined!} />);
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   it('should support custom attribute', () => {
     const { asFragment } = render(
-      <Breadcrumb data-custom="custom">
-        <Breadcrumb.Item data-custom="custom-item">xxx</Breadcrumb.Item>
-        <Breadcrumb.Item>yyy</Breadcrumb.Item>
-      </Breadcrumb>,
+      (
+        <Breadcrumb
+          items={[
+            {
+              title: 'xxx',
+              // @ts-ignore
+              'data-custom': 'custom-item',
+            },
+            {
+              title: 'yyy',
+            },
+          ]}
+          data-custom="custom"
+        />
+      ) as React.ReactElement<any, string | React.JSXElementConstructor<any>>,
     );
     expect(asFragment().firstChild).toMatchSnapshot();
   });
@@ -194,12 +290,19 @@ describe('Breadcrumb', () => {
     );
     expect(asFragment().firstChild).toMatchSnapshot();
   });
+
   it('should support string `0` and number `0`', () => {
     const { container } = render(
-      <Breadcrumb>
-        <Breadcrumb.Item>{0}</Breadcrumb.Item>
-        <Breadcrumb.Item>0</Breadcrumb.Item>
-      </Breadcrumb>,
+      <Breadcrumb
+        items={[
+          {
+            title: 0,
+          },
+          {
+            title: '0',
+          },
+        ]}
+      />,
     );
     expect(container.querySelectorAll('.ant-breadcrumb-link')[0].textContent).toBe('0');
     expect(container.querySelectorAll('.ant-breadcrumb-link')[1].textContent).toBe('0');
@@ -207,6 +310,7 @@ describe('Breadcrumb', () => {
   });
 
   it('should console Error when `overlay` in props', () => {
+    resetWarned();
     const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     render(
       <Breadcrumb>
@@ -221,7 +325,7 @@ describe('Breadcrumb', () => {
 
   it('should not console Error when `overlay` not in props', () => {
     const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    render(<Breadcrumb routes={[{ path: '/', breadcrumbName: 'Test' }]} />);
+    render(<Breadcrumb items={[{ path: '/', title: 'Test' }]} />);
     expect(errSpy).not.toHaveBeenCalled();
     errSpy.mockRestore();
   });
diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
index 2cf89626c9..2af8918a6b 100644
--- a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`Breadcrumb rtl render component should be rendered correctly in RTL dir
 </nav>
 `;
 
-exports[`Breadcrumb should accept undefined routes 1`] = `
+exports[`Breadcrumb should accept undefined items 1`] = `
 <nav
   class="ant-breadcrumb"
 >
@@ -103,15 +103,12 @@ exports[`Breadcrumb should render a menu 1`] = `
 >
   <ol>
     <li>
-      <span
+      <a
         class="ant-breadcrumb-link"
+        href="#/index"
       >
-        <a
-          href="#/index"
-        >
-          home
-        </a>
-      </span>
+        home
+      </a>
     </li>
     <li
       aria-hidden="true"
@@ -123,15 +120,12 @@ exports[`Breadcrumb should render a menu 1`] = `
       <span
         class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
       >
-        <span
+        <a
           class="ant-breadcrumb-link"
+          href="#/index/first"
         >
-          <a
-            href="#/index/first"
-          >
-            first
-          </a>
-        </span>
+          first
+        </a>
         <span
           aria-label="down"
           class="anticon anticon-down"
@@ -160,15 +154,43 @@ exports[`Breadcrumb should render a menu 1`] = `
       /
     </li>
     <li>
-      <span
+      <a
         class="ant-breadcrumb-link"
+        href="#/index/first/second"
       >
-        <a
-          href="#/index/first/second"
-        >
-          second
-        </a>
-      </span>
+        second
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </li>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href="#/index/first/second/third"
+      />
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`Breadcrumb should render correct 1`] = `
+<nav
+  class="ant-breadcrumb"
+>
+  <ol>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href="#/"
+      >
+        <span>
+          xxx
+        </span>
+      </a>
     </li>
     <li
       aria-hidden="true"
@@ -180,15 +202,9 @@ exports[`Breadcrumb should render a menu 1`] = `
       <span
         class="ant-breadcrumb-link"
       >
-        <span />
+        yyy
       </span>
     </li>
-    <li
-      aria-hidden="true"
-      class="ant-breadcrumb-separator"
-    >
-      /
-    </li>
   </ol>
 </nav>
 `;
diff --git a/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap
index 2600a7ec94..036ccd5c5f 100644
--- a/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -63,6 +63,177 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx extend context correctly
 </nav>
 `;
 
+exports[`renders ./components/breadcrumb/demo/debug-routes.tsx extend context correctly 1`] = `
+<nav
+  class="ant-breadcrumb"
+>
+  <ol>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href="#/home"
+      >
+        Home
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </li>
+    <li>
+      <span
+        class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
+      >
+        <a
+          class="ant-breadcrumb-link"
+          href="#/home/user"
+        >
+          User
+        </a>
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+      <div>
+        <div
+          class="ant-dropdown"
+          style="opacity:0"
+        >
+          <ul
+            class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+            data-menu-list="true"
+            role="menu"
+            tabindex="0"
+          >
+            <li
+              class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                class="ant-dropdown-menu-title-content"
+              >
+                <a
+                  href="#/home/user/user1"
+                >
+                  User1
+                </a>
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                class="ant-dropdown-menu-title-content"
+              >
+                <a
+                  href="#/home/user/user2"
+                >
+                  User2
+                </a>
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+          </ul>
+          <div
+            aria-hidden="true"
+            style="display:none"
+          >
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ol>
+</nav>
+`;
+
 exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correctly 1`] = `
 <nav
   class="ant-breadcrumb"
diff --git a/components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap b/components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap
index c3f669544a..72ff4a0623 100644
--- a/components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap
@@ -63,6 +63,60 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx correctly 1`] = `
 </nav>
 `;
 
+exports[`renders ./components/breadcrumb/demo/debug-routes.tsx correctly 1`] = `
+<nav
+  class="ant-breadcrumb"
+>
+  <ol>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href="#/home"
+      >
+        Home
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </li>
+    <li>
+      <span
+        class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
+      >
+        <a
+          class="ant-breadcrumb-link"
+          href="#/home/user"
+        >
+          User
+        </a>
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
 exports[`renders ./components/breadcrumb/demo/overlay.tsx correctly 1`] = `
 <nav
   class="ant-breadcrumb"
diff --git a/components/breadcrumb/__tests__/__snapshots__/router.test.tsx.snap b/components/breadcrumb/__tests__/__snapshots__/router.test.tsx.snap
index e876d644a6..15e64fa01b 100644
--- a/components/breadcrumb/__tests__/__snapshots__/router.test.tsx.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/router.test.tsx.snap
@@ -6,15 +6,12 @@ exports[`react router react router 3 1`] = `
 >
   <ol>
     <li>
-      <span
+      <a
         class="ant-breadcrumb-link"
+        href="#/"
       >
-        <a
-          href="#/"
-        >
-          Home
-        </a>
-      </span>
+        Home
+      </a>
     </li>
     <li
       aria-hidden="true"
@@ -23,15 +20,12 @@ exports[`react router react router 3 1`] = `
       /
     </li>
     <li>
-      <span
+      <a
         class="ant-breadcrumb-link"
+        href="#//apps"
       >
-        <a
-          href="#/apps"
-        >
-          Application List
-        </a>
-      </span>
+        Application List
+      </a>
     </li>
     <li
       aria-hidden="true"
@@ -40,15 +34,12 @@ exports[`react router react router 3 1`] = `
       /
     </li>
     <li>
-      <span
+      <a
         class="ant-breadcrumb-link"
+        href="#//apps/1"
       >
-        <a
-          href="#/apps/1"
-        >
-          Application1
-        </a>
-      </span>
+        Application1
+      </a>
     </li>
     <li
       aria-hidden="true"
@@ -57,19 +48,12 @@ exports[`react router react router 3 1`] = `
       /
     </li>
     <li>
-      <span
+      <a
         class="ant-breadcrumb-link"
+        href="#//apps/1/detail"
       >
-        <span>
-          Detail
-        </span>
-      </span>
-    </li>
-    <li
-      aria-hidden="true"
-      class="ant-breadcrumb-separator"
-    >
-      /
+        Detail
+      </a>
     </li>
   </ol>
 </nav>
diff --git a/components/breadcrumb/demo/basic.tsx b/components/breadcrumb/demo/basic.tsx
index 34c7df2191..da01baea19 100644
--- a/components/breadcrumb/demo/basic.tsx
+++ b/components/breadcrumb/demo/basic.tsx
@@ -2,16 +2,22 @@ import React from 'react';
 import { Breadcrumb } from 'antd';
 
 const App: React.FC = () => (
-  <Breadcrumb>
-    <Breadcrumb.Item>Home</Breadcrumb.Item>
-    <Breadcrumb.Item>
-      <a href="">Application Center</a>
-    </Breadcrumb.Item>
-    <Breadcrumb.Item>
-      <a href="">Application List</a>
-    </Breadcrumb.Item>
-    <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>
+  <Breadcrumb
+    items={[
+      {
+        title: 'Home',
+      },
+      {
+        title: <a href="">Application Center</a>,
+      },
+      {
+        title: <a href="">Application List</a>,
+      },
+      {
+        title: 'An Application',
+      },
+    ]}
+  />
 );
 
 export default App;
diff --git a/components/breadcrumb/demo/debug-routes.md b/components/breadcrumb/demo/debug-routes.md
new file mode 100644
index 0000000000..ab155a3003
--- /dev/null
+++ b/components/breadcrumb/demo/debug-routes.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+原 `routes` 调试。
+
+## en-US
+
+Origin `routes` debug.
diff --git a/components/breadcrumb/demo/debug-routes.tsx b/components/breadcrumb/demo/debug-routes.tsx
new file mode 100644
index 0000000000..2d8fa6b694
--- /dev/null
+++ b/components/breadcrumb/demo/debug-routes.tsx
@@ -0,0 +1,27 @@
+import { Breadcrumb } from 'antd';
+import React from 'react';
+
+export default () => (
+  <Breadcrumb
+    routes={[
+      {
+        path: '/home',
+        breadcrumbName: 'Home',
+      },
+      {
+        path: '/user',
+        breadcrumbName: 'User',
+        children: [
+          {
+            path: '/user1',
+            breadcrumbName: 'User1',
+          },
+          {
+            path: '/user2',
+            breadcrumbName: 'User2',
+          },
+        ],
+      },
+    ]}
+  />
+);
diff --git a/components/breadcrumb/demo/overlay.tsx b/components/breadcrumb/demo/overlay.tsx
index de787bc154..63bc4fb11d 100644
--- a/components/breadcrumb/demo/overlay.tsx
+++ b/components/breadcrumb/demo/overlay.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Breadcrumb } from 'antd';
 
-const items = [
+const menuItems = [
   {
     key: '1',
     label: (
@@ -29,16 +29,23 @@ const items = [
 ];
 
 const App: React.FC = () => (
-  <Breadcrumb>
-    <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
-    <Breadcrumb.Item>
-      <a href="">Component</a>
-    </Breadcrumb.Item>
-    <Breadcrumb.Item menu={{ items }}>
-      <a href="">General</a>
-    </Breadcrumb.Item>
-    <Breadcrumb.Item>Button</Breadcrumb.Item>
-  </Breadcrumb>
+  <Breadcrumb
+    items={[
+      {
+        title: 'Ant Design',
+      },
+      {
+        title: <a href="">Component</a>,
+      },
+      {
+        title: <a href="">General</a>,
+        menu: { items: menuItems },
+      },
+      {
+        title: 'Button',
+      },
+    ]}
+  />
 );
 
 export default App;
diff --git a/components/breadcrumb/demo/react-router.tsx b/components/breadcrumb/demo/react-router.tsx
index 552e701480..8627c3a917 100644
--- a/components/breadcrumb/demo/react-router.tsx
+++ b/components/breadcrumb/demo/react-router.tsx
@@ -27,17 +27,17 @@ const Home = () => {
 
   const extraBreadcrumbItems = pathSnippets.map((_, index) => {
     const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
-    return (
-      <Breadcrumb.Item key={url}>
-        <Link to={url}>{breadcrumbNameMap[url]}</Link>
-      </Breadcrumb.Item>
-    );
+    return {
+      key: url,
+      title: <Link to={url}>{breadcrumbNameMap[url]}</Link>,
+    };
   });
 
   const breadcrumbItems = [
-    <Breadcrumb.Item key="home">
-      <Link to="/">Home</Link>
-    </Breadcrumb.Item>,
+    {
+      title: <Link to="/">Home</Link>,
+      key: 'home',
+    },
   ].concat(extraBreadcrumbItems);
 
   return (
@@ -51,7 +51,7 @@ const Home = () => {
         <Route path="*" element={<span>Home Page</span>} />
       </Routes>
       <Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
-      <Breadcrumb>{breadcrumbItems}</Breadcrumb>
+      <Breadcrumb items={breadcrumbItems} />
     </div>
   );
 };
diff --git a/components/breadcrumb/demo/separator-component.md b/components/breadcrumb/demo/separator-component.md
index 42e7453853..bd87023b49 100644
--- a/components/breadcrumb/demo/separator-component.md
+++ b/components/breadcrumb/demo/separator-component.md
@@ -1,7 +1,7 @@
 ## zh-CN
 
-使用 `Breadcrumb.Separator` 可以自定义分隔符。
+自定义单独的分隔符。
 
 ## en-US
 
-The separator can be customized by setting the separator property: `Breadcrumb.Separator`.
+Customize separator for each other.
diff --git a/components/breadcrumb/demo/separator-component.tsx b/components/breadcrumb/demo/separator-component.tsx
index 61222b5f7f..87bafba337 100644
--- a/components/breadcrumb/demo/separator-component.tsx
+++ b/components/breadcrumb/demo/separator-component.tsx
@@ -1,16 +1,36 @@
-import React from 'react';
 import { Breadcrumb } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
-  <Breadcrumb separator="">
-    <Breadcrumb.Item>Location</Breadcrumb.Item>
-    <Breadcrumb.Separator>:</Breadcrumb.Separator>
-    <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
-    <Breadcrumb.Separator />
-    <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
-    <Breadcrumb.Separator />
-    <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>
+  <Breadcrumb
+    separator=""
+    items={[
+      {
+        title: 'Location',
+      },
+      {
+        type: 'separator',
+        separator: ':',
+      },
+      {
+        href: '',
+        title: 'Application Center',
+      },
+      {
+        type: 'separator',
+      },
+      {
+        href: '',
+        title: 'Application List',
+      },
+      {
+        type: 'separator',
+      },
+      {
+        title: 'An Application',
+      },
+    ]}
+  />
 );
 
 export default App;
diff --git a/components/breadcrumb/demo/separator.tsx b/components/breadcrumb/demo/separator.tsx
index 2b3b80c61e..2161a7527d 100644
--- a/components/breadcrumb/demo/separator.tsx
+++ b/components/breadcrumb/demo/separator.tsx
@@ -2,12 +2,25 @@ import React from 'react';
 import { Breadcrumb } from 'antd';
 
 const App: React.FC = () => (
-  <Breadcrumb separator=">">
-    <Breadcrumb.Item>Home</Breadcrumb.Item>
-    <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
-    <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
-    <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>
+  <Breadcrumb
+    separator=">"
+    items={[
+      {
+        title: 'Home',
+      },
+      {
+        title: 'Application Center',
+        href: '',
+      },
+      {
+        title: 'Application List',
+        href: '',
+      },
+      {
+        title: 'An Application',
+      },
+    ]}
+  />
 );
 
 export default App;
diff --git a/components/breadcrumb/demo/withIcon.tsx b/components/breadcrumb/demo/withIcon.tsx
index 67cdde5740..3c437bb575 100644
--- a/components/breadcrumb/demo/withIcon.tsx
+++ b/components/breadcrumb/demo/withIcon.tsx
@@ -1,18 +1,28 @@
-import React from 'react';
 import { HomeOutlined, UserOutlined } from '@ant-design/icons';
 import { Breadcrumb } from 'antd';
+import React from 'react';
 
 const App: React.FC = () => (
-  <Breadcrumb>
-    <Breadcrumb.Item href="">
-      <HomeOutlined />
-    </Breadcrumb.Item>
-    <Breadcrumb.Item href="">
-      <UserOutlined />
-      <span>Application List</span>
-    </Breadcrumb.Item>
-    <Breadcrumb.Item>Application</Breadcrumb.Item>
-  </Breadcrumb>
+  <Breadcrumb
+    items={[
+      {
+        href: '',
+        title: <HomeOutlined />,
+      },
+      {
+        href: '',
+        title: (
+          <>
+            <UserOutlined />
+            <span>Application List</span>
+          </>
+        ),
+      },
+      {
+        title: 'Application',
+      },
+    ]}
+  />
 );
 
 export default App;
diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md
index 474f62b5b7..801a4fb663 100644
--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@@ -16,6 +16,22 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 - When you need to inform the user of where they are.
 - When the user may need to navigate back to a higher level.
 
+```jsx
+// works when >=5.3.0, recommended ✅
+return <Breadcrumb items={[{ title: 'sample' }]} />;
+
+// works when <5.3.0, deprecated when >=5.3.0 🙅🏻‍♀️
+return (
+  <Breadcrumb>
+    <Breadcrumb.Item>sample</Breadcrumb.Item>
+  </Breadcrumb>
+);
+
+// or
+
+return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
+```
+
 ## Examples
 
 <!-- prettier-ignore -->
@@ -25,6 +41,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 <code src="./demo/separator.tsx">Configuring the Separator</code>
 <code src="./demo/overlay.tsx">Bread crumbs with drop down menu</code>
 <code src="./demo/separator-component.tsx">Configuring the Separator</code>
+<code src="./demo/debug-routes.tsx">Debug Routes</code>
 
 ## API
 
@@ -34,10 +51,14 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 | --- | --- | --- | --- | --- |
 | itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | - |  |
 | params | Routing parameters | object | - |  |
-| routes | The routing stack information of router | [routes\[\]](#routes) | - |  |
+| items | The routing stack information of router | [items\[\]](#ItemType) | - | 5.3.0 |
 | separator | Custom separator | ReactNode | `/` |  |
 
-### Breadcrumb.Item
+### ItemType
+
+> type ItemType = [RouteItemType](#RouteItemType) | [SeparatorType](#SeparatorType)
+
+### RouteItemType
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
@@ -46,28 +67,22 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 | href | Target of hyperlink | string | - |  |
 | menu | The menu props | [MenuProps](/components/menu/#api) | - | 4.24.0 |
 | onClick | Set the handler to handle click event | (e:MouseEvent) => void | - |  |
+| title | item name | ReactNode | - |  |
 
-### Breadcrumb.Separator
-
-| Property | Description      | Type      | Default | Version |
-| -------- | ---------------- | --------- | ------- | ------- |
-| children | Custom separator | ReactNode | `/`     |         |
-
-> When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.
-
-### routes
+### SeparatorType
 
 ```ts
-interface Route {
-  path: string;
-  breadcrumbName: string;
-  children: Array<{
-    path: string;
-    breadcrumbName: string;
-  }>;
-}
+const item = {
+  type: 'separator', // Must have
+  separator: '/',
+};
 ```
 
+| Property  | Description       | Type        | Default | Version |
+| --------- | ----------------- | ----------- | ------- | ------- |
+| type      | Mark as separator | `separator` |         | 5.3.0   |
+| separator | Custom separator  | ReactNode   | `/`     | 5.3.0   |
+
 ### Use with browserHistory
 
 The link of Breadcrumb item targets `#` by default, you can use `itemRender` to make a `browserHistory` Link.
@@ -75,42 +90,38 @@ The link of Breadcrumb item targets `#` by default, you can use `itemRender` to
 ```jsx
 import { Link } from 'react-router';
 
-const routes = [
+const items = [
   {
     path: 'index',
-    breadcrumbName: 'home',
+    title: 'home',
   },
   {
     path: 'first',
-    breadcrumbName: 'first',
+    title: 'first',
     children: [
       {
         path: '/general',
-        breadcrumbName: 'General',
+        title: 'General',
       },
       {
         path: '/layout',
-        breadcrumbName: 'Layout',
+        title: 'Layout',
       },
       {
         path: '/navigation',
-        breadcrumbName: 'Navigation',
+        title: 'Navigation',
       },
     ],
   },
   {
     path: 'second',
-    breadcrumbName: 'second',
+    title: 'second',
   },
 ];
-function itemRender(route, params, routes, paths) {
-  const last = routes.indexOf(route) === routes.length - 1;
-  return last ? (
-    <span>{route.breadcrumbName}</span>
-  ) : (
-    <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
-  );
+function itemRender(route, params, items, paths) {
+  const last = items.indexOf(item) === items.length - 1;
+  return last ? <span>{item.title}</span> : <Link to={paths.join('/')}>{item.title}</Link>;
 }
 
-return <Breadcrumb itemRender={itemRender} routes={routes} />;
+return <Breadcrumb itemRender={itemRender} items={items} />;
 ```
diff --git a/components/breadcrumb/index.ts b/components/breadcrumb/index.ts
index 7c3fbec555..202800b19c 100644
--- a/components/breadcrumb/index.ts
+++ b/components/breadcrumb/index.ts
@@ -1,6 +1,6 @@
 import Breadcrumb from './Breadcrumb';
 
 export type { BreadcrumbProps } from './Breadcrumb';
-export type { BreadcrumbItemProps } from './BreadcrumbItem';
+export type { BreadcrumbItemProps, SeparatorType } from './BreadcrumbItem';
 
 export default Breadcrumb;
diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md
index 5ae38e0308..8fb5574a81 100644
--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@@ -17,6 +17,22 @@ demo:
 - 当需要告知用户『你在哪里』时；
 - 当需要向上导航的功能时。
 
+```jsx
+// >=5.3.0 可用，推荐的写法 ✅
+return <Breadcrumb items={[{ title: 'sample' }]} />;
+
+// <5.3.0 可用，>=5.3.0 时不推荐 🙅🏻‍♀️
+return (
+  <Breadcrumb>
+    <Breadcrumb.Item>sample</Breadcrumb.Item>
+  </Breadcrumb>
+);
+
+// 或
+
+return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
+```
+
 ## 代码演示
 
 <!-- prettier-ignore -->
@@ -26,6 +42,7 @@ demo:
 <code src="./demo/separator.tsx">分隔符</code>
 <code src="./demo/overlay.tsx">带下拉菜单的面包屑</code>
 <code src="./demo/separator-component.tsx">分隔符</code>
+<code src="./demo/debug-routes.tsx">Debug Routes</code>
 
 ## API
 
@@ -35,10 +52,14 @@ demo:
 | --- | --- | --- | --- | --- |
 | itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - |  |
 | params | 路由的参数 | object | - |  |
-| routes | router 的路由栈信息 | [routes\[\]](#routes) | - |  |
+| items | 路由栈信息 | [items\[\]](#ItemType) | - | 5.3.0 |
 | separator | 分隔符自定义 | ReactNode | `/` |  |
 
-### Breadcrumb.Item
+### ItemType
+
+> type ItemType = [RouteItemType](#RouteItemType) | [SeparatorType](#SeparatorType)
+
+### RouteItemType
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
@@ -47,28 +68,22 @@ demo:
 | href | 链接的目的地 | string | - |  |
 | menu | 菜单配置项 | [MenuProps](/components/menu-cn/#api) | - | 4.24.0 |
 | onClick | 单击事件 | (e:MouseEvent) => void | - |  |
+| title | 名称 | ReactNode | - | 5.3.0 |
 
-### Breadcrumb.Separator
-
-| 参数     | 说明           | 类型      | 默认值 | 版本 |
-| -------- | -------------- | --------- | ------ | ---- |
-| children | 要显示的分隔符 | ReactNode | `/`    |      |
-
-> 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。
-
-### routes
+### SeparatorType
 
 ```ts
-interface Route {
-  path: string;
-  breadcrumbName: string;
-  children: Array<{
-    path: string;
-    breadcrumbName: string;
-  }>;
-}
+const item = {
+  type: 'separator', // Must have
+  separator: '/',
+};
 ```
 
+| 参数      | 说明           | 类型        | 默认值 | 版本  |
+| --------- | -------------- | ----------- | ------ | ----- |
+| type      | 标记为分隔符   | `separator` |        | 5.3.0 |
+| separator | 要显示的分隔符 | ReactNode   | `/`    | 5.3.0 |
+
 ### 和 browserHistory 配合
 
 和 react-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
@@ -76,43 +91,38 @@ interface Route {
 ```jsx
 import { Link } from 'react-router';
 
-const routes = [
+const items = [
   {
     path: 'index',
-    breadcrumbName: 'home',
+    title: 'home',
   },
   {
     path: 'first',
-    breadcrumbName: 'first',
+    title: 'first',
     children: [
       {
         path: '/general',
-        breadcrumbName: 'General',
+        title: 'General',
       },
       {
         path: '/layout',
-        breadcrumbName: 'Layout',
+        title: 'Layout',
       },
       {
         path: '/navigation',
-        breadcrumbName: 'Navigation',
+        title: 'Navigation',
       },
     ],
   },
   {
     path: 'second',
-    breadcrumbName: 'second',
+    title: 'second',
   },
 ];
-
-function itemRender(route, params, routes, paths) {
-  const last = routes.indexOf(route) === routes.length - 1;
-  return last ? (
-    <span>{route.breadcrumbName}</span>
-  ) : (
-    <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
-  );
+function itemRender(item, params, items, paths) {
+  const last = items.indexOf(item) === items.length - 1;
+  return last ? <span>{item.title}</span> : <Link to={paths.join('/')}>{item.title}</Link>;
 }
 
-return <Breadcrumb itemRender={itemRender} routes={routes} />;
+return <Breadcrumb itemRender={itemRender} items={items} />;
 ```
diff --git a/components/breadcrumb/useItems.ts b/components/breadcrumb/useItems.ts
new file mode 100644
index 0000000000..cb50627183
--- /dev/null
+++ b/components/breadcrumb/useItems.ts
@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import type { BreadcrumbItemType, BreadcrumbSeparatorType, ItemType, Route } from './Breadcrumb';
+
+type MergedType = BreadcrumbItemType & {
+  children?: Route['children'];
+};
+
+function route2item(route: Route): MergedType {
+  const { breadcrumbName, children, ...rest } = route;
+
+  const clone: MergedType = {
+    title: breadcrumbName,
+    ...rest,
+  };
+
+  if (children) {
+    clone.menu = {
+      items: children.map(({ breadcrumbName: itemBreadcrumbName, ...itemProps }) => ({
+        ...itemProps,
+        title: itemBreadcrumbName,
+      })),
+    };
+  }
+
+  return clone;
+}
+
+export default function useItems(
+  items?: ItemType[],
+  routes?: Route[],
+): Partial<MergedType & BreadcrumbSeparatorType>[] | null {
+  return useMemo<ItemType[] | null>(() => {
+    if (items) {
+      return items;
+    }
+
+    if (routes) {
+      return routes.map(route2item);
+    }
+
+    return null;
+  }, [items, routes]);
+}

From 6c32399bd4d12e245cdd38055424d8edfd7b5c67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Sun, 5 Mar 2023 23:29:03 +0800
Subject: [PATCH 2/2] chore: Select like component always showArrow (#41028)

* chore: always showArrow

* test: update snapshot

* fix: autoComplete arrow logic

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: update snapshot
---
 components/auto-complete/index.tsx            |   1 +
 .../__snapshots__/demo-extend.test.ts.snap    | 112 +++++-
 .../__snapshots__/demo.test.tsx.snap          | 112 +++++-
 .../__snapshots__/index.test.tsx.snap         |  56 ++-
 components/cascader/index.tsx                 |   7 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  84 +++-
 .../__snapshots__/demo.test.tsx.snap          |  84 +++-
 .../__snapshots__/demo-extend.test.ts.snap    | 336 +++++++++++++++-
 .../__snapshots__/demo.test.tsx.snap          | 364 +++++++++++++++++-
 components/select/index.tsx                   |   6 +-
 components/select/useShowArrow.ts             |   9 +
 .../__snapshots__/demo-extend.test.ts.snap    |  28 +-
 .../__snapshots__/demo.test.tsx.snap          |  28 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  84 +++-
 .../__snapshots__/demo.test.tsx.snap          |  84 +++-
 .../__snapshots__/index.test.tsx.snap         |  28 +-
 components/tree-select/index.tsx              |   5 +-
 17 files changed, 1370 insertions(+), 58 deletions(-)
 create mode 100644 components/select/useShowArrow.ts

diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index d2622f52bd..3d5547bc67 100755
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -144,6 +144,7 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
   return (
     <Select
       ref={ref}
+      showArrow={false}
       {...omit(props, ['dataSource', 'dropdownClassName'])}
       prefixCls={prefixCls}
       popupClassName={popupClassName || dropdownClassName}
diff --git a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4d6bde303a..d6c4a2cc99 100644
--- a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1510,7 +1510,7 @@ exports[`renders ./components/cascader/demo/lazy.tsx extend context correctly 1`
 
 exports[`renders ./components/cascader/demo/multiple.tsx extend context correctly 1`] = `
 <div
-  class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
+  class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
   style="width:100%"
 >
   <div
@@ -1655,6 +1655,32 @@ exports[`renders ./components/cascader/demo/multiple.tsx extend context correctl
       </div>
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -2193,7 +2219,7 @@ exports[`renders ./components/cascader/demo/search.tsx extend context correctly
 exports[`renders ./components/cascader/demo/showCheckedStrategy.tsx extend context correctly 1`] = `
 Array [
   <div
-    class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
+    class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
     style="width:100%"
   >
     <div
@@ -2351,6 +2377,32 @@ Array [
         </div>
       </div>
     </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
     <span
       aria-hidden="true"
       class="ant-select-clear"
@@ -2381,7 +2433,7 @@ Array [
   <br />,
   <br />,
   <div
-    class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
+    class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
     style="width:100%"
   >
     <div
@@ -2539,6 +2591,32 @@ Array [
         </div>
       </div>
     </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
     <span
       aria-hidden="true"
       class="ant-select-clear"
@@ -3151,7 +3229,7 @@ exports[`renders ./components/cascader/demo/status.tsx extend context correctly
     class="ant-space-item"
   >
     <div
-      class="ant-select ant-cascader ant-select-status-warning ant-select-multiple ant-select-allow-clear"
+      class="ant-select ant-cascader ant-select-status-warning ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
     >
       <div
         class="ant-select-selector"
@@ -3267,6 +3345,32 @@ exports[`renders ./components/cascader/demo/status.tsx extend context correctly
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
 </div>
diff --git a/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap b/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap
index 4c5c522e87..dde4ba73fb 100644
--- a/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap
@@ -618,7 +618,7 @@ exports[`renders ./components/cascader/demo/lazy.tsx correctly 1`] = `
 
 exports[`renders ./components/cascader/demo/multiple.tsx correctly 1`] = `
 <div
-  class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
+  class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
   style="width:100%"
 >
   <div
@@ -661,6 +661,32 @@ exports[`renders ./components/cascader/demo/multiple.tsx correctly 1`] = `
       class="ant-select-selection-placeholder"
     />
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -935,7 +961,7 @@ exports[`renders ./components/cascader/demo/search.tsx correctly 1`] = `
 exports[`renders ./components/cascader/demo/showCheckedStrategy.tsx correctly 1`] = `
 Array [
   <div
-    class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
+    class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
     style="width:100%"
   >
     <div
@@ -991,6 +1017,32 @@ Array [
         </div>
       </div>
     </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
     <span
       aria-hidden="true"
       class="ant-select-clear"
@@ -1021,7 +1073,7 @@ Array [
   <br />,
   <br />,
   <div
-    class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
+    class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
     style="width:100%"
   >
     <div
@@ -1077,6 +1129,32 @@ Array [
         </div>
       </div>
     </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
     <span
       aria-hidden="true"
       class="ant-select-clear"
@@ -1353,7 +1431,7 @@ exports[`renders ./components/cascader/demo/status.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-select ant-cascader ant-select-status-warning ant-select-multiple ant-select-allow-clear"
+      class="ant-select ant-cascader ant-select-status-warning ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
     >
       <div
         class="ant-select-selector"
@@ -1397,6 +1475,32 @@ exports[`renders ./components/cascader/demo/status.tsx correctly 1`] = `
           Warning multiple
         </span>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
 </div>
diff --git a/components/cascader/__tests__/__snapshots__/index.test.tsx.snap b/components/cascader/__tests__/__snapshots__/index.test.tsx.snap
index df36cdb82e..e86e2ec65d 100644
--- a/components/cascader/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/cascader/__tests__/__snapshots__/index.test.tsx.snap
@@ -866,7 +866,7 @@ exports[`Cascader can be selected in RTL direction 3`] = `
 
 exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
 <div
-  class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-open"
+  class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-open"
 >
   <div
     class="ant-select-selector"
@@ -1012,12 +1012,38 @@ exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
       </div>
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select: none;"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
 exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
 <div
-  class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-open"
+  class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-open"
 >
   <div
     class="ant-select-selector"
@@ -1163,6 +1189,32 @@ exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
       </div>
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select: none;"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 6c6e7338b4..861c17bc57 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -29,8 +29,9 @@ import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import warning from '../_util/warning';
 
 import useSelectStyle from '../select/style';
-import useStyle from './style';
+import useShowArrow from '../select/useShowArrow';
 import genPurePanel from '../_util/PurePanel';
+import useStyle from './style';
 
 // Align the design since we use `rc-select` in root. This help:
 // - List search content will show all content
@@ -254,7 +255,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   );
 
   // ===================== Icons =====================
-  const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !multiple;
+  const mergedShowArrow = useShowArrow(showArrow);
   const { suffixIcon, removeIcon, clearIcon } = getIcons({
     ...props,
     hasFeedback,
@@ -314,7 +315,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
       )}
       getPopupContainer={getPopupContainer || getContextPopupContainer}
       ref={ref}
-      showArrow={hasFeedback || showArrow}
+      showArrow={hasFeedback || mergedShowArrow}
     />
   );
 
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 52d40c6a57..a3f166b430 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -935,7 +935,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <div
-                class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
+                class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
                 style="width:70%"
               >
                 <div
@@ -1123,6 +1123,32 @@ Array [
                     </div>
                   </div>
                 </div>
+                <span
+                  aria-hidden="true"
+                  class="ant-select-arrow"
+                  style="user-select:none;-webkit-user-select:none"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down ant-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </div>
             </div>
           </div>
@@ -1338,7 +1364,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <div
-                class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
+                class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
                 style="width:70%"
               >
                 <div
@@ -1526,6 +1552,32 @@ Array [
                     </div>
                   </div>
                 </div>
+                <span
+                  aria-hidden="true"
+                  class="ant-select-arrow"
+                  style="user-select:none;-webkit-user-select:none"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down ant-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </div>
             </div>
           </div>
@@ -19053,7 +19105,7 @@ exports[`renders ./components/form/demo/validate-other.tsx extend context correc
           >
             <div
               aria-required="true"
-              class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
+              class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
             >
               <div
                 class="ant-select-selector"
@@ -19179,6 +19231,32 @@ exports[`renders ./components/form/demo/validate-other.tsx extend context correc
                   </div>
                 </div>
               </div>
+              <span
+                aria-hidden="true"
+                class="ant-select-arrow"
+                style="user-select:none;-webkit-user-select:none"
+                unselectable="on"
+              >
+                <span
+                  aria-label="down"
+                  class="anticon anticon-down ant-select-suffix"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </div>
           </div>
         </div>
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
index 6ecedcb04c..cdf3e8d7a7 100644
--- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -775,7 +775,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <div
-                class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
+                class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
                 style="width:70%"
               >
                 <div
@@ -858,6 +858,32 @@ Array [
                     </div>
                   </div>
                 </div>
+                <span
+                  aria-hidden="true"
+                  class="ant-select-arrow"
+                  style="user-select:none;-webkit-user-select:none"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down ant-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </div>
             </div>
           </div>
@@ -1073,7 +1099,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <div
-                class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
+                class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
                 style="width:70%"
               >
                 <div
@@ -1156,6 +1182,32 @@ Array [
                     </div>
                   </div>
                 </div>
+                <span
+                  aria-hidden="true"
+                  class="ant-select-arrow"
+                  style="user-select:none;-webkit-user-select:none"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down ant-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </div>
             </div>
           </div>
@@ -8161,7 +8213,7 @@ exports[`renders ./components/form/demo/validate-other.tsx correctly 1`] = `
           >
             <div
               aria-required="true"
-              class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
+              class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-arrow ant-select-show-search"
             >
               <div
                 class="ant-select-selector"
@@ -8208,6 +8260,32 @@ exports[`renders ./components/form/demo/validate-other.tsx correctly 1`] = `
                   Please select favourite colors
                 </span>
               </div>
+              <span
+                aria-hidden="true"
+                class="ant-select-arrow"
+                style="user-select:none;-webkit-user-select:none"
+                unselectable="on"
+              >
+                <span
+                  aria-label="down"
+                  class="anticon anticon-down ant-select-suffix"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                    />
+                  </svg>
+                </span>
+              </span>
             </div>
           </div>
         </div>
diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
index 347345172f..cb2de65864 100644
--- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`renders ./components/select/demo/automatic-tokenization.tsx extend context correctly 1`] = `
 <div
-  class="ant-select ant-select-multiple ant-select-show-search"
+  class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -375,6 +375,32 @@ exports[`renders ./components/select/demo/automatic-tokenization.tsx extend cont
       </div>
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -2251,7 +2277,7 @@ exports[`renders ./components/select/demo/debug.tsx extend context correctly 1`]
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-select ant-select-multiple ant-select-show-search"
+      class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
       style="width:120px"
     >
       <div
@@ -2460,6 +2486,32 @@ exports[`renders ./components/select/demo/debug.tsx extend context correctly 1`]
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
   <div
@@ -2490,7 +2542,7 @@ exports[`renders ./components/select/demo/debug.tsx extend context correctly 1`]
 
 exports[`renders ./components/select/demo/hide-selected.tsx extend context correctly 1`] = `
 <div
-  class="ant-select ant-select-multiple ant-select-show-search"
+  class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -2626,6 +2678,32 @@ exports[`renders ./components/select/demo/hide-selected.tsx extend context corre
       </div>
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -2782,7 +2860,7 @@ exports[`renders ./components/select/demo/multiple.tsx extend context correctly
     style="margin-bottom:8px"
   >
     <div
-      class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
+      class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
       style="width:100%"
     >
       <div
@@ -3289,6 +3367,32 @@ exports[`renders ./components/select/demo/multiple.tsx extend context correctly
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
       <span
         aria-hidden="true"
         class="ant-select-clear"
@@ -3321,7 +3425,7 @@ exports[`renders ./components/select/demo/multiple.tsx extend context correctly
     class="ant-space-item"
   >
     <div
-      class="ant-select ant-select-multiple ant-select-disabled ant-select-show-search"
+      class="ant-select ant-select-multiple ant-select-show-arrow ant-select-disabled ant-select-show-search"
       style="width:100%"
     >
       <div
@@ -3778,6 +3882,32 @@ exports[`renders ./components/select/demo/multiple.tsx extend context correctly
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
 </div>
@@ -3962,7 +4092,7 @@ exports[`renders ./components/select/demo/optgroup.tsx extend context correctly
 
 exports[`renders ./components/select/demo/option-label-prop.tsx extend context correctly 1`] = `
 <div
-  class="ant-select ant-select-multiple ant-select-show-search"
+  class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -4234,6 +4364,32 @@ exports[`renders ./components/select/demo/option-label-prop.tsx extend context c
       </div>
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -4478,7 +4634,7 @@ exports[`renders ./components/select/demo/responsive.tsx extend context correctl
     style="margin-bottom:8px"
   >
     <div
-      class="ant-select ant-select-multiple ant-select-show-search"
+      class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
       style="width:100%"
     >
       <div
@@ -4997,13 +5153,39 @@ exports[`renders ./components/select/demo/responsive.tsx extend context correctl
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
   <div
     class="ant-space-item"
   >
     <div
-      class="ant-select ant-select-multiple ant-select-disabled ant-select-show-search"
+      class="ant-select ant-select-multiple ant-select-show-arrow ant-select-disabled ant-select-show-search"
       style="width:100%"
     >
       <div
@@ -5524,6 +5706,32 @@ exports[`renders ./components/select/demo/responsive.tsx extend context correctl
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
 </div>
@@ -5938,7 +6146,7 @@ exports[`renders ./components/select/demo/search-sort.tsx extend context correct
 
 exports[`renders ./components/select/demo/select-users.tsx extend context correctly 1`] = `
 <div
-  class="ant-select ant-select-multiple ant-select-show-search"
+  class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -5996,6 +6204,32 @@ exports[`renders ./components/select/demo/select-users.tsx extend context correc
       />
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -6627,7 +6861,7 @@ Array [
       style="margin-bottom:8px"
     >
       <div
-        class="ant-select ant-select-multiple ant-select-show-search"
+        class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
         style="width:100%"
       >
         <div
@@ -7134,13 +7368,39 @@ Array [
             </div>
           </div>
         </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
       </div>
     </div>
     <div
       class="ant-space-item"
     >
       <div
-        class="ant-select ant-select-multiple ant-select-show-search"
+        class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
         style="width:100%"
       >
         <div
@@ -7644,6 +7904,32 @@ Array [
             </div>
           </div>
         </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
       </div>
     </div>
   </div>,
@@ -8208,7 +8494,7 @@ exports[`renders ./components/select/demo/suffix.tsx extend context correctly 1`
 
 exports[`renders ./components/select/demo/tags.tsx extend context correctly 1`] = `
 <div
-  class="ant-select ant-select-multiple ant-select-show-search"
+  class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -8583,5 +8869,31 @@ exports[`renders ./components/select/demo/tags.tsx extend context correctly 1`]
       </div>
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
diff --git a/components/select/__tests__/__snapshots__/demo.test.tsx.snap b/components/select/__tests__/__snapshots__/demo.test.tsx.snap
index 346065b22c..ca6ff943b9 100644
--- a/components/select/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders ./components/select/demo/automatic-tokenization.tsx correctly 1`] = `
 <div
-  class="ant-select ant-select-multiple ant-select-show-search"
+  class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -43,6 +43,32 @@ exports[`renders ./components/select/demo/automatic-tokenization.tsx correctly 1
       class="ant-select-selection-placeholder"
     />
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -357,7 +383,7 @@ Array [
      Items
   </h4>,
   <div
-    class="ant-select ant-select-multiple ant-select-show-search"
+    class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
     style="width:100%"
   >
     <div
@@ -454,6 +480,32 @@ Array [
         </div>
       </div>
     </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
   </div>,
   <div
     class="ant-divider ant-divider-horizontal"
@@ -1032,7 +1084,7 @@ exports[`renders ./components/select/demo/debug.tsx correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-select ant-select-multiple ant-select-show-search"
+      class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
       style="width:120px"
     >
       <div
@@ -1114,6 +1166,32 @@ exports[`renders ./components/select/demo/debug.tsx correctly 1`] = `
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
   <div
@@ -1144,7 +1222,7 @@ exports[`renders ./components/select/demo/debug.tsx correctly 1`] = `
 
 exports[`renders ./components/select/demo/hide-selected.tsx correctly 1`] = `
 <div
-  class="ant-select ant-select-multiple ant-select-show-search"
+  class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -1190,6 +1268,32 @@ exports[`renders ./components/select/demo/hide-selected.tsx correctly 1`] = `
       Inserted are removed
     </span>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -1266,7 +1370,7 @@ exports[`renders ./components/select/demo/multiple.tsx correctly 1`] = `
     style="margin-bottom:8px"
   >
     <div
-      class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
+      class="ant-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
       style="width:100%"
     >
       <div
@@ -1389,6 +1493,32 @@ exports[`renders ./components/select/demo/multiple.tsx correctly 1`] = `
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
       <span
         aria-hidden="true"
         class="ant-select-clear"
@@ -1421,7 +1551,7 @@ exports[`renders ./components/select/demo/multiple.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-select ant-select-multiple ant-select-disabled ant-select-show-search"
+      class="ant-select ant-select-multiple ant-select-show-arrow ant-select-disabled ant-select-show-search"
       style="width:100%"
     >
       <div
@@ -1494,6 +1624,32 @@ exports[`renders ./components/select/demo/multiple.tsx correctly 1`] = `
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
 </div>
@@ -1564,7 +1720,7 @@ exports[`renders ./components/select/demo/optgroup.tsx correctly 1`] = `
 
 exports[`renders ./components/select/demo/option-label-prop.tsx correctly 1`] = `
 <div
-  class="ant-select ant-select-multiple ant-select-show-search"
+  class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -1646,6 +1802,32 @@ exports[`renders ./components/select/demo/option-label-prop.tsx correctly 1`] =
       </div>
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -1807,7 +1989,7 @@ exports[`renders ./components/select/demo/responsive.tsx correctly 1`] = `
     style="margin-bottom:8px"
   >
     <div
-      class="ant-select ant-select-multiple ant-select-show-search"
+      class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
       style="width:100%"
     >
       <div
@@ -1864,13 +2046,39 @@ exports[`renders ./components/select/demo/responsive.tsx correctly 1`] = `
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
   <div
     class="ant-space-item"
   >
     <div
-      class="ant-select ant-select-multiple ant-select-disabled ant-select-show-search"
+      class="ant-select ant-select-multiple ant-select-show-arrow ant-select-disabled ant-select-show-search"
       style="width:100%"
     >
       <div
@@ -1929,6 +2137,32 @@ exports[`renders ./components/select/demo/responsive.tsx correctly 1`] = `
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
 </div>
@@ -2086,7 +2320,7 @@ exports[`renders ./components/select/demo/search-sort.tsx correctly 1`] = `
 
 exports[`renders ./components/select/demo/select-users.tsx correctly 1`] = `
 <div
-  class="ant-select ant-select-multiple ant-select-show-search"
+  class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -2132,6 +2366,32 @@ exports[`renders ./components/select/demo/select-users.tsx correctly 1`] = `
       Select users
     </span>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -2275,7 +2535,7 @@ Array [
       style="margin-bottom:8px"
     >
       <div
-        class="ant-select ant-select-multiple ant-select-show-search"
+        class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
         style="width:100%"
       >
         <div
@@ -2398,13 +2658,39 @@ Array [
             </div>
           </div>
         </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
       </div>
     </div>
     <div
       class="ant-space-item"
     >
       <div
-        class="ant-select ant-select-multiple ant-select-show-search"
+        class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
         style="width:100%"
       >
         <div
@@ -2524,6 +2810,32 @@ Array [
             </div>
           </div>
         </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
       </div>
     </div>
   </div>,
@@ -2803,7 +3115,7 @@ exports[`renders ./components/select/demo/suffix.tsx correctly 1`] = `
 
 exports[`renders ./components/select/demo/tags.tsx correctly 1`] = `
 <div
-  class="ant-select ant-select-multiple ant-select-show-search"
+  class="ant-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -2846,5 +3158,31 @@ exports[`renders ./components/select/demo/tags.tsx correctly 1`] = `
       Tags Mode
     </span>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
diff --git a/components/select/index.tsx b/components/select/index.tsx
index fe28f1dfde..21bd4345aa 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -22,6 +22,7 @@ import { useCompactItemContext } from '../space/Compact';
 import genPurePanel from '../_util/PurePanel';
 import warning from '../_util/warning';
 import useStyle from './style';
+import useShowArrow from './useShowArrow';
 
 type RawValue = string | number;
 
@@ -117,8 +118,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
   }, [props.mode]);
 
   const isMultiple = mode === 'multiple' || mode === 'tags';
-  const mergedShowArrow =
-    showArrow !== undefined ? showArrow : props.loading || !(isMultiple || mode === 'combobox');
+  const mergedShowArrow = useShowArrow(showArrow);
 
   // ===================== Form Status =====================
   const {
@@ -225,7 +225,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
       className={mergedClassName}
       getPopupContainer={getPopupContainer || getContextPopupContainer}
       dropdownClassName={rcSelectRtlDropdownClassName}
-      showArrow={hasFeedback || showArrow}
+      showArrow={hasFeedback || mergedShowArrow}
       disabled={mergedDisabled}
     />,
   );
diff --git a/components/select/useShowArrow.ts b/components/select/useShowArrow.ts
new file mode 100644
index 0000000000..3c157f0d39
--- /dev/null
+++ b/components/select/useShowArrow.ts
@@ -0,0 +1,9 @@
+/**
+ * Since Select, TreeSelect, Cascader is same Select like component.
+ * We just use same hook to handle this logic.
+ *
+ * If `showArrow` not configured, always show it.
+ */
+export default function useShowArrow(showArrow?: boolean) {
+  return showArrow ?? true;
+}
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index 52d72e34d0..5f2aa13eab 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -614,7 +614,7 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-search"
+      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
       style="width:50%"
     >
       <div
@@ -790,6 +790,32 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
       <span
         aria-hidden="true"
         class="ant-select-clear"
diff --git a/components/space/__tests__/__snapshots__/demo.test.tsx.snap b/components/space/__tests__/__snapshots__/demo.test.tsx.snap
index 8f91a34809..a99352a5c9 100644
--- a/components/space/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/space/__tests__/__snapshots__/demo.test.tsx.snap
@@ -437,7 +437,7 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-search"
+      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
       style="width:50%"
     >
       <div
@@ -519,6 +519,32 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
       <span
         aria-hidden="true"
         class="ant-select-clear"
diff --git a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
index de9dc9dd53..c647a13412 100644
--- a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -565,7 +565,7 @@ exports[`renders ./components/tree-select/demo/basic.tsx extend context correctl
 
 exports[`renders ./components/tree-select/demo/checkable.tsx extend context correctly 1`] = `
 <div
-  class="ant-select ant-tree-select ant-select-multiple ant-select-show-search"
+  class="ant-select ant-tree-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -798,12 +798,38 @@ exports[`renders ./components/tree-select/demo/checkable.tsx extend context corr
       </div>
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
 exports[`renders ./components/tree-select/demo/multiple.tsx extend context correctly 1`] = `
 <div
-  class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
+  class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -1131,6 +1157,32 @@ exports[`renders ./components/tree-select/demo/multiple.tsx extend context corre
       </div>
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -1873,7 +1925,7 @@ exports[`renders ./components/tree-select/demo/status.tsx extend context correct
     class="ant-space-item"
   >
     <div
-      class="ant-select ant-tree-select ant-select-status-warning ant-select-multiple ant-select-show-search"
+      class="ant-select ant-tree-select ant-select-status-warning ant-select-multiple ant-select-show-arrow ant-select-show-search"
       style="width:100%"
     >
       <div
@@ -1975,6 +2027,32 @@ exports[`renders ./components/tree-select/demo/status.tsx extend context correct
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
 </div>
diff --git a/components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap b/components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap
index ca4fab121d..511eaa8724 100644
--- a/components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo.test.tsx.snap
@@ -121,7 +121,7 @@ exports[`renders ./components/tree-select/demo/basic.tsx correctly 1`] = `
 
 exports[`renders ./components/tree-select/demo/checkable.tsx correctly 1`] = `
 <div
-  class="ant-select ant-tree-select ant-select-multiple ant-select-show-search"
+  class="ant-select ant-tree-select ant-select-multiple ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -202,12 +202,38 @@ exports[`renders ./components/tree-select/demo/checkable.tsx correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
 exports[`renders ./components/tree-select/demo/multiple.tsx correctly 1`] = `
 <div
-  class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
+  class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
   style="width:100%"
 >
   <div
@@ -252,6 +278,32 @@ exports[`renders ./components/tree-select/demo/multiple.tsx correctly 1`] = `
       Please select
     </span>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select:none;-webkit-user-select:none"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -536,7 +588,7 @@ exports[`renders ./components/tree-select/demo/status.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-select ant-tree-select ant-select-status-warning ant-select-multiple ant-select-show-search"
+      class="ant-select ant-tree-select ant-select-status-warning ant-select-multiple ant-select-show-arrow ant-select-show-search"
       style="width:100%"
     >
       <div
@@ -581,6 +633,32 @@ exports[`renders ./components/tree-select/demo/status.tsx correctly 1`] = `
           Warning multiple
         </span>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
 </div>
diff --git a/components/tree-select/__tests__/__snapshots__/index.test.tsx.snap b/components/tree-select/__tests__/__snapshots__/index.test.tsx.snap
index 6cee6902cc..b87ee7ae78 100644
--- a/components/tree-select/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/tree-select/__tests__/__snapshots__/index.test.tsx.snap
@@ -144,7 +144,7 @@ exports[`TreeSelect TreeSelect Custom Icons should \`treeIcon\` work 1`] = `
 
 exports[`TreeSelect TreeSelect Custom Icons should support customized icons 1`] = `
 <div
-  class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-search"
+  class="ant-select ant-tree-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
 >
   <div
     class="ant-select-selector"
@@ -234,6 +234,32 @@ exports[`TreeSelect TreeSelect Custom Icons should support customized icons 1`]
       </div>
     </div>
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select: none;"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-select-suffix"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
   <span
     aria-hidden="true"
     class="ant-select-clear"
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 1f73727fd8..059cc17c35 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -26,6 +26,7 @@ import { useCompactItemContext } from '../space/Compact';
 import warning from '../_util/warning';
 
 import useStyle from './style';
+import useShowArrow from '../select/useShowArrow';
 
 type RawValue = string | number;
 
@@ -138,7 +139,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
   );
 
   const isMultiple = !!(treeCheckable || multiple);
-  const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !isMultiple;
+  const mergedShowArrow = useShowArrow(showArrow);
 
   // ===================== Form =====================
   const {
@@ -239,7 +240,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
         getTransitionDirection(placement),
         transitionName,
       )}
-      showArrow={hasFeedback || showArrow}
+      showArrow={hasFeedback || mergedShowArrow}
       treeExpandAction={treeExpandAction}
     />
   );