fix: dropdown submenu arrow wrong direction in rtl (#52885)

* fix: dropdown submenu arrow wrong direction in rtl

* test: dropdown arrow direction in rtl mode

* Update components/dropdown/dropdown.tsx

Signed-off-by: lijianan <574980606@qq.com>

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: thinkasany <480968828@qq.com>
Co-authored-by: lijianan <574980606@qq.com>

Author: 3 people

components/dropdown/__tests__/index.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { TriggerProps } from '@rc-component/trigger';
+import ConfigProvider from '../../config-provider';
 
 import type { DropDownProps } from '..';
 import Dropdown from '..';
@@ -376,4 +377,36 @@ describe('Dropdown', () => {
     ).toBeInTheDocument();
     expect(container.querySelector('.ant-dropdown-menu-item-extra')?.textContent).toBe(text);
   });
+
+  it('should show correct arrow direction in rtl mode', () => {
+    const items = [
+      {
+        key: '1',
+        label: 'sub menu',
+        children: [
+          {
+            key: '1-1',
+            label: '1rd menu item',
+          },
+          {
+            key: '1-2',
+            label: '2th menu item',
+          },
+        ],
+      },
+    ];
+
+    const { container } = render(
+      <ConfigProvider direction="rtl">
+        <Dropdown menu={{ items, openKeys: ['2'] }} open autoAdjustOverflow={false}>
+          <a onClick={(e) => e.preventDefault()}>Cascading menu</a>
+        </Dropdown>
+      </ConfigProvider>,
+    );
+    expect(
+      container.querySelector(
+        '.ant-dropdown-menu-submenu-arrow .ant-dropdown-menu-submenu-arrow-icon',
+      ),
+    ).toHaveClass('anticon-left');
+  });
 });

components/dropdown/dropdown.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import type { AlignType } from '@rc-component/trigger';
 import classNames from 'classnames';
@@ -252,14 +253,17 @@ const Dropdown: CompoundedComponent = (props) => {
     overlayNode = React.Children.only(
       typeof overlayNode === 'string' ? <span>{overlayNode}</span> : overlayNode,
     );
-
     return (
       <OverrideProvider
         prefixCls={`${prefixCls}-menu`}
         rootClassName={classNames(cssVarCls, rootCls)}
         expandIcon={
           <span className={`${prefixCls}-menu-submenu-arrow`}>
-            <RightOutlined className={`${prefixCls}-menu-submenu-arrow-icon`} />
+            {direction === 'rtl' ? (
+              <LeftOutlined className={`${prefixCls}-menu-submenu-arrow-icon`} />
+            ) : (
+              <RightOutlined className={`${prefixCls}-menu-submenu-arrow-icon`} />
+            )}
           </span>
         }
         mode="vertical"