fix: Menu popup miss rtl cls (#423)

* fix: Menu popup miss rtl cls * test: reorder
react-component · Oct 8, 2021 · 9d85b24 · 9d85b24
1 parent f468451
commit 9d85b24
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/src/SubMenu/SubMenuList.tsx b/src/SubMenu/SubMenuList.tsx
@@ -11,12 +11,13 @@ const InternalSubMenuList = (
   { className, children, ...restProps }: SubMenuListProps,
   ref: React.Ref<HTMLUListElement>,
 ) => {
-  const { prefixCls, mode } = React.useContext(MenuContext);
+  const { prefixCls, mode, rtl } = React.useContext(MenuContext);
 
   return (
     <ul
       className={classNames(
         prefixCls,
+        rtl && `${prefixCls}-rtl`,
         `${prefixCls}-sub`,
         `${prefixCls}-${mode === 'inline' ? 'inline' : 'vertical'}`,
         className,

diff --git a/tests/Menu.spec.js b/tests/Menu.spec.js
@@ -8,7 +8,7 @@ import Menu, { MenuItem, MenuItemGroup, SubMenu, Divider } from '../src';
 
 describe('Menu', () => {
   describe('should render', () => {
-    function createMenu(props) {
+    function createMenu(props, subKey) {
       return (
         <Menu
           disabledOverflow
@@ -28,13 +28,37 @@ describe('Menu', () => {
               5
             </MenuItem>
           </MenuItemGroup>
-          <SubMenu title="submenu">
+          <SubMenu key={subKey} title="submenu">
             <MenuItem key="6">6</MenuItem>
           </SubMenu>
         </Menu>
       );
     }
 
+    it('popup with rtl has correct className', () => {
+      jest.useFakeTimers();
+      const wrapper = mount(
+        createMenu(
+          { mode: 'vertical', direction: 'rtl', openKeys: ['sub'] },
+          'sub',
+        ),
+      );
+
+      act(() => {
+        jest.runAllTimers();
+        wrapper.update();
+      });
+
+      expect(
+        wrapper.find('.rc-menu-submenu-popup').exists('.rc-menu-rtl'),
+      ).toBeTruthy();
+
+      wrapper.unmount();
+
+      jest.useRealTimers();
+      jest.clearAllTimers();
+    });
+
     ['vertical', 'horizontal', 'inline'].forEach(mode => {
       it(`${mode} menu correctly`, () => {
         const wrapper = mount(createMenu({ mode }));