fix(module: menu): submenu montion & style (#3024)

* fix(module: menu): submenu open montion & style * fix test
2024-12-02 03:57:38 +08:00 · 2023-01-18 18:44:57 +08:00 · 2023-01-18 18:44:57 +08:00 · 06d5169bc9
commit 06d5169bc9
parent fca181d7d6
12 changed files with 121 additions and 100 deletions
--- a/components/alert/Alert.razor.cs
+++ b/components/alert/Alert.razor.cs
@ -104,7 +104,7 @@ namespace AntDesign

        private int _motionStage;

-        private int _height;
+        private decimal _height;

        private string _innerStyle = string.Empty;

--- a/components/core/Component/Overlay/Overlay.razor.cs
+++ b/components/core/Component/Overlay/Overlay.razor.cs
@ -459,7 +459,7 @@ namespace AntDesign.Internal
            }
        }

-        private int ChangeOverlayLeftToRight(int left, HtmlElement overlay, HtmlElement container)
+        private decimal ChangeOverlayLeftToRight(int left, HtmlElement overlay, HtmlElement container)
        {
            return container.ClientWidth - left - overlay.OffsetWidth;
        }
--- a/components/core/Component/Overlay/type/PlacementType.cs
+++ b/components/core/Component/Overlay/type/PlacementType.cs
@ -9,8 +9,10 @@ namespace AntDesign
    public enum Placement
    {
        TopLeft,
+
        [Obsolete("Please use 'Placement.Top' instead.")]
        TopCenter,
+
        Top = 2,
        TopRight,
        Left,
@ -20,8 +22,10 @@ namespace AntDesign
        RightTop,
        RightBottom,
        BottomLeft,
+
        [Obsolete("Please use 'Placement.Bottom' instead.")]
        BottomCenter,
+
        Bottom = 12,
        BottomRight
    }
@ -37,7 +41,7 @@ namespace AntDesign
        public static readonly PlacementType LeftBottom = new PlacementType("leftBottom", "up", "100% 66%", 5, Placement.LeftBottom);

        public static readonly PlacementType Right = new PlacementType("right", "up", "0 50%", 6, Placement.Right);
-        public static readonly PlacementType RightTop = new PlacementType("rightTop", "down", "0 33%", 7, Placement.RightTop);
+        public static readonly PlacementType RightTop = new PlacementType("rightTop", "up", "0 33%", 7, Placement.RightTop);
        public static readonly PlacementType RightBottom = new PlacementType("rightBottom", "up", "0 66%", 8, Placement.RightBottom);

        public static readonly PlacementType BottomLeft = new PlacementType("bottomLeft", "up", "33% 0", 9, Placement.BottomLeft);
--- a/components/core/JsInterop/HtmlElement.cs
+++ b/components/core/JsInterop/HtmlElement.cs
@ -5,48 +5,48 @@ namespace AntDesign.JsInterop
    public class HtmlElement
    {
        [JsonPropertyName("absoluteTop")]
-        public int AbsoluteTop { get; set; }
+        public decimal AbsoluteTop { get; set; }

        [JsonPropertyName("absoluteLeft")]
-        public int AbsoluteLeft { get; set; }
+        public decimal AbsoluteLeft { get; set; }

        [JsonPropertyName("offsetTop")]
-        public int OffsetTop { get; set; }
+        public decimal OffsetTop { get; set; }

        [JsonPropertyName("offsetLeft")]
-        public int OffsetLeft { get; set; }
+        public decimal OffsetLeft { get; set; }

        [JsonPropertyName("offsetWidth")]
-        public int OffsetWidth { get; set; }
+        public decimal OffsetWidth { get; set; }

        [JsonPropertyName("offsetHeight")]
-        public int OffsetHeight { get; set; }
+        public decimal OffsetHeight { get; set; }

        [JsonPropertyName("scrollHeight")]
-        public int ScrollHeight { get; set; }
+        public decimal ScrollHeight { get; set; }

        [JsonPropertyName("scrollWidth")]
-        public int ScrollWidth { get; set; }
+        public decimal ScrollWidth { get; set; }

        [JsonPropertyName("scrollLeft")]
-        public double ScrollLeft { get; set; }
+        public decimal ScrollLeft { get; set; }

        [JsonPropertyName("scrollTop")]
-        public double ScrollTop { get; set; }
+        public decimal ScrollTop { get; set; }

        [JsonPropertyName("clientTop")]
-        public int ClientTop { get; set; }
+        public decimal ClientTop { get; set; }

        [JsonPropertyName("clientLeft")]
-        public int ClientLeft { get; set; }
+        public decimal ClientLeft { get; set; }

        [JsonPropertyName("clientHeight")]
-        public int ClientHeight { get; set; }
+        public decimal ClientHeight { get; set; }

        [JsonPropertyName("clientWidth")]
-        public int ClientWidth { get; set; }
+        public decimal ClientWidth { get; set; }

        [JsonPropertyName("selectionStart")]
-        public int SelectionStart { get; set; }
+        public decimal SelectionStart { get; set; }
    }
 }
--- a/components/date-picker/internal/DatePickerBase.cs
+++ b/components/date-picker/internal/DatePickerBase.cs
@ -398,7 +398,7 @@ namespace AntDesign
                else if (_inputEnd.IsOnFocused)
                {
                    HtmlElement element = await JsInvokeAsync<HtmlElement>(JSInteropConstants.GetDomInfo, _inputEnd.Ref);
-                    int translateDistance = element.ClientWidth + 16;
+                    decimal translateDistance = element.ClientWidth + 16;

                    if (RTL)
                    {
--- a/components/menu/SubMenu.razor
+++ b/components/menu/SubMenu.razor
@ -10,14 +10,16 @@
 {
    <li class="@ClassMapper.Class" role="menuitem" @key="Key" style="position:relative;@Style" @ref="Ref">
        <div class="@(prefixCls)-title" style="padding-left: @(PaddingLeft)px; " role="button" @onclick="HandleOnTitleClick" aria-haspopup="true">
-            @if (TitleTemplate != null)
-            {
-                @TitleTemplate
-            }
-            else if (Title != null)
-            {
-                <span>@Title</span>
-            }
+            <span class="ant-menu-title-content">
+                @if (TitleTemplate != null)
+                {
+                    @TitleTemplate
+                }
+                else if (Title != null)
+                {
+                    @Title
+                }
+            </span>
            <i class="@(prefixCls)-arrow"></i>
        </div>
        <ul direction="ltr" class="@SubMenuMapper.Class" role="menu" aria-expanded="@IsOpen">
@ -45,20 +47,19 @@ else if (RootMenu.InlineCollapsed || RootMenu.InternalMode == MenuMode.Horizonta
                            OnVisibleChange="OnOverlayVisibleChange"
                            OnOverlayHiding="OnOverlayHiding"
                            Trigger="new Trigger[] { RootMenu?.TriggerSubMenuAction ?? AntDesign.Trigger.Hover }"
-                            PlacementCls="@($"{prefixCls}-popup {RootMenu.PrefixCls} {RootMenu.PrefixCls}-{RootMenu.Theme} {prefixCls}-placement-{_placement.Name}")"
-                            OverlayEnterCls="@($"{prefixCls}-{RootMenu.Theme} ")"
-                            OverlayLeaveCls="@($"{prefixCls}-{RootMenu.Theme} ")"
-                            OverlayHiddenCls="@($"{prefixCls}-hidden")">
+                            PlacementCls="@($"{prefixCls}-popup {RootMenu.PrefixCls} {RootMenu.PrefixCls}-{RootMenu.Theme} {prefixCls}-placement-{_placement.Name}")">
                <ChildContent>
                    <div class="@(prefixCls)-title" role="button">
-                        @if (TitleTemplate != null)
-                        {
-                            @TitleTemplate
-                        }
-                        else if (Title != null)
-                        {
-                            <span>@Title</span>
-                        }
+                        <span class="ant-menu-title-content">
+                            @if (TitleTemplate != null)
+                            {
+                                @TitleTemplate
+                            }
+                            else if (Title != null)
+                            {
+                                @Title
+                            }
+                        </span>
                        @GetArrow()
                    </div>
                </ChildContent>
--- a/components/menu/SubMenu.razor.cs
+++ b/components/menu/SubMenu.razor.cs
@ -80,13 +80,14 @@ namespace AntDesign
            ClassMapper
                    .Clear()
                    .Add(prefixCls)
-                    .Get(() => $"{prefixCls}-{RootMenu?.InternalMode}")
+                     .Get(() => $"{prefixCls}-{(RootMenu?.InternalMode == MenuMode.Horizontal ? MenuMode.Vertical : RootMenu?.InternalMode)}")
                    .If($"{prefixCls}-disabled", () => Disabled)
                    .If($"{prefixCls}-selected", () => _isSelected)
-                    .If($"{prefixCls}-open", () => {
+                    .If($"{prefixCls}-open", () =>
+                    {
                        var eval = RootMenu?.InternalMode == MenuMode.Inline && IsOpen;
                        return eval;
-                        })
+                    })
                    ;

            SubMenuMapper
@ -168,7 +169,7 @@ namespace AntDesign

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
-            if (RootMenu.InternalMode != MenuMode.Inline && _overlayTrigger != null && IsOpen)
+            if (firstRender && RootMenu.InternalMode != MenuMode.Inline && _overlayTrigger != null)
            {
                var domInfo = await _overlayTrigger.GetTriggerDomInfo();
                _popupMinWidthStyle = $"min-width: {domInfo.ClientWidth}px";
--- a/components/menu/internal/SubMenuTrigger.razor
+++ b/components/menu/internal/SubMenuTrigger.razor
@ -11,10 +11,8 @@
    @ref="@Ref"
    @onclick="OnClickDiv"
    @onmouseenter="OnTriggerMouseEnter"
-    @onmouseleave="OnTriggerMouseLeave"
-    @oncontextmenu="OnTriggerContextmenu"
-    @oncontextmenu:preventDefault>
-    @ChildContent
+    @onmouseleave="OnTriggerMouseLeave">
+        @ChildContent
 </li>

 <CascadingValue Value="this" Name="Trigger">
--- a/components/menu/internal/SubMenuTrigger.razor.cs
+++ b/components/menu/internal/SubMenuTrigger.razor.cs
@ -9,5 +9,25 @@ namespace AntDesign.Internal

        [Parameter]
        public string TriggerClass { get; set; }
+
+        internal override string GetOverlayEnterClass()
+        {
+            if (Placement == Placement.RightTop)
+            {
+                return "ant-zoom-big-enter ant-zoom-big-enter-active ant-zoom-big";
+            }
+
+            return base.GetOverlayEnterClass();
+        }
+
+        internal override string GetOverlayLeaveClass()
+        {
+            if (Placement == Placement.RightTop)
+            {
+                return "ant-zoom-big-leave ant-zoom-big-leave-active ant-zoom-big";
+            }
+
+            return base.GetOverlayLeaveClass();
+        }
    }
 }
--- a/components/tabs/Tabs.razor.cs
+++ b/components/tabs/Tabs.razor.cs
@ -174,11 +174,11 @@ namespace AntDesign
        private string _operationClass = "ant-tabs-nav-operations ant-tabs-nav-operations-hidden";
        private string _operationStyle = "visibility: hidden; order: 1;";

-        private double _scrollOffset;
-        private int _scrollListWidth;
-        private int _scrollListHeight;
-        private int _wrapperWidth;
-        private int _wrapperHeight;
+        private decimal _scrollOffset;
+        private decimal _scrollListWidth;
+        private decimal _scrollListHeight;
+        private decimal _wrapperWidth;
+        private decimal _wrapperHeight;

        private bool _shouldRender;
        private bool _afterFirstRender;
@ -503,7 +503,7 @@ namespace AntDesign

        private void OnWheel(string json)
        {
-            int maxOffset;
+            decimal maxOffset;
            if (IsHorizontal)
            {
                maxOffset = _scrollListWidth - _wrapperWidth;
@ -610,16 +610,16 @@ namespace AntDesign
            }

            int invisibleHeadCount;
-            double tabSize, visibleCount;
+            decimal tabSize, visibleCount;

            if (IsHorizontal)
            {
-                tabSize = 1.0 * _scrollListWidth / _tabs.Count;
+                tabSize = _scrollListWidth / _tabs.Count;
                visibleCount = Math.Ceiling(_wrapperWidth / tabSize);
            }
            else
            {
-                tabSize = 1.0 * _scrollListHeight / _tabs.Count;
+                tabSize = _scrollListHeight / _tabs.Count;
                visibleCount = Math.Ceiling(_wrapperHeight / tabSize);
            }

--- a/tests/AntDesign.Tests/Menu/Menu.Horizontal.Tests.razor
+++ b/tests/AntDesign.Tests/Menu/Menu.Horizontal.Tests.razor
@ -7,8 +7,10 @@
            .SetResult(new AntDesign.JsInterop.DomRect());
        JSInterop.Setup<OverlayPosition>(JSInteropConstants.OverlayComponentHelper.AddOverlayToContainer, _ => true)
            .SetResult(new OverlayPosition() { Top = 0, Left = 0, ZIndex = 5000, Placement = Placement.BottomLeft });
+        JSInterop.Setup<HtmlElement>(JSInteropConstants.DomInfoHelper.GetFirstChildDomInfo, _ => true)
+            .SetResult(new HtmlElement { ClientWidth = 123 });
    }
-    
+
    private RenderFragment GetBasicHorizontalRender()
    {
        return @<Menu Mode=MenuMode.Horizontal>
@ -50,9 +52,9 @@
                        Navigation One	
 			        </span>
 		        </li>       
-                <li class=""ant-menu-submenu ant-menu-submenu-horizontal"" role=""menuitem"" style=""position:relative;"">    
+                <li class=""ant-menu-submenu ant-menu-submenu-vertical"" role=""menuitem"" style=""position:relative;"">
                    <div class=""ant-menu-submenu-title"" role=""button"">
-                        <span>
+                        <span class=""ant-menu-title-content"">
                            Navigation Two
                        </span>
                    </div>
@ -77,8 +79,8 @@
        var topOverlay = topExpandable.FindComponent<AntDesign.Internal.Overlay>();
        //Assert
        topOverlay.MarkupMatches(@"
-            <div class=""ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-bottomLeft ant-menu-submenu-light"" style:ignore>                    
-                <ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style="""" role=""menu"">                        
+            <div class=""ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-bottomLeft ant-slide-up-enter ant-slide-up-enter-active ant-slide-up"" style:ignore>
+                <ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style=""min-width: 123px"" role=""menu"">                        
                    <li class=""ant-menu-item-group"">
                        <div class=""ant-menu-item-group-title"">
                            Item 1    
@ -107,9 +109,9 @@
                                    Option 3	
 			                    </span>
 		                    </li>
-                            <li class=""ant-menu-submenu ant-menu-submenu-horizontal"" role=""menuitem"" style=""position:relative;"">
+                            <li class=""ant-menu-submenu ant-menu-submenu-vertical"" role=""menuitem"" style=""position:relative;"">
                                <div class=""ant-menu-submenu-title"" role=""button"">
-                                    <span>
+                                    <span class=""ant-menu-title-content"">
                                        Option 4
                                    </span>
                                    <i class=""ant-menu-submenu-arrow""></i>
@ -136,16 +138,16 @@
        var midOverlay = midExpandable.FindComponent<AntDesign.Internal.Overlay>();
        //Assert        
        midOverlay.MarkupMatches(@"
-            <div style:ignore class=""ant-menu-submenu   ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-rightTop ant-menu-submenu-light"">
-                <ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style="""" role=""menu"">
+            <div style:ignore class=""ant-menu-submenu   ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-rightTop ant-slide-up-enter ant-slide-up-enter-active ant-slide-up"">
+                <ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style=""min-width: 123px"" role=""menu"">
                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
                		<span class=""ant-menu-title-content"">
                            Option 1	
                		</span>
 		            </li>
-                    <li class=""ant-menu-submenu ant-menu-submenu-horizontal"" role=""menuitem"" style=""position:relative;"">
+                    <li class=""ant-menu-submenu ant-menu-submenu-vertical"" role=""menuitem"" style=""position:relative;"">
                        <div class=""ant-menu-submenu-title"" role=""button"">
-                            <span>
+                            <span class=""ant-menu-title-content"">
                                Option 5
                            </span>
                            <i class=""ant-menu-submenu-arrow""></i>
@ -171,8 +173,8 @@
        var bottomOverlay = bottomExpandable.FindComponent<AntDesign.Internal.Overlay>();              
        //Assert        
        bottomOverlay.MarkupMatches(@"
-            <div style:ignore class=""ant-menu-submenu   ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-rightTop ant-menu-submenu-light"">
-                <ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style="""" role=""menu"">
+            <div style:ignore class=""ant-menu-submenu   ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-rightTop ant-slide-up-enter ant-slide-up-enter-active ant-slide-up"">
+                <ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style=""min-width: 123px"" role=""menu"">
                    <li class=""ant-menu-item"" role=""menuitem"" style="""">
                		<span class=""ant-menu-title-content"">
                            Option 1	
--- a/tests/AntDesign.Tests/Menu/Menu.Inline.Tests.razor
+++ b/tests/AntDesign.Tests/Menu/Menu.Inline.Tests.razor
@ -12,18 +12,6 @@

    private RenderFragment GetBasicInlineRender(bool expaned, string[]? defaultSelectedKeys = null, bool hasIcon = false)
    {
-        RenderFragment sub1Title = hasIcon ?
-        @<span>
-            @if (hasIcon) 
-            {
-                <Icon Type="mail" Theme="outline"></Icon>
-            }
-            <span>Navigation One</span>
-        </span> 
-        :
-        @<span>Navigation One</span>
-        ;
-
        string[] openKeys = expaned ? new[] { "sub1" } : Array.Empty<string>();        

        return 
@ -31,15 +19,24 @@
            DefaultSelectedKeys=@(defaultSelectedKeys ?? Array.Empty<string>())
            DefaultOpenKeys=@openKeys
            Mode=@MenuMode.Inline>
-            <SubMenu Key="sub1" TitleTemplate=@sub1Title>
-                <MenuItemGroup Title="Item 1">
-                    <MenuItem Key="1">Option 1</MenuItem>
-                    <MenuItem Key="2">Option 2</MenuItem>
-                </MenuItemGroup>
-                <MenuItemGroup Key="g2" Title="Item 2">
-                    <MenuItem Key="3">Option 3</MenuItem>
-                    <MenuItem Key="4">Option 4</MenuItem>
-                </MenuItemGroup>
+            <SubMenu Key="sub1" >
+            <TitleTemplate>
+                @if (hasIcon)
+                {
+                    <Icon Type="mail" Theme="outline"></Icon>
+                }
+                Navigation One
+            </TitleTemplate>
+                <ChildContent>
+                    <MenuItemGroup Title="Item 1">
+                        <MenuItem Key="1">Option 1</MenuItem>
+                        <MenuItem Key="2">Option 2</MenuItem>
+                    </MenuItemGroup>
+                    <MenuItemGroup Key="g2" Title="Item 2">
+                        <MenuItem Key="3">Option 3</MenuItem>
+                        <MenuItem Key="4">Option 4</MenuItem>
+                    </MenuItemGroup>
+                </ChildContent>
            </SubMenu>
            <MenuItem Key="nav2">Navigation Two</MenuItem>
        </Menu>
@ -58,15 +55,13 @@
            <ul class=""ant-menu ant-menu-root ant-menu-light ant-menu-inline"" style=""width: 256px;"" id:ignore direction=""ltr"" role=""menu"">        
                <li class=""ant-menu-submenu ant-menu-submenu-inline"" role=""menuitem"" style=""position:relative;"">
                    <div class=""ant-menu-submenu-title"" style=""padding-left: 24px; "" role=""button"" aria-haspopup=""true"">
-                        <span>
+                        <span class=""ant-menu-title-content"">
                            <span role=""img"" class="" anticon anticon-mail"" id:ignore>
                                <svg focusable=""false"" width=""1em"" height=""1em"" fill=""currentColor"" style=""pointer-events: none;"" xmlns:ignore class=""icon"" viewBox=""0 0 1024 1024"">  
                                    <path d=""M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z""></path>
                                </svg>
                            </span>
-                            <span>
-                                Navigation One
-                            </span>
+                            Navigation One
                        </span>
                        <i class=""ant-menu-submenu-arrow""></i>
                    </div>
@ -128,7 +123,7 @@
            <ul class=""ant-menu ant-menu-root ant-menu-light ant-menu-inline"" style=""width: 256px;"" id:ignore direction=""ltr"" role=""menu"">        
                <li class=""ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"" role=""menuitem"" style=""position:relative;"">
                    <div class=""ant-menu-submenu-title"" style=""padding-left: 24px; "" role=""button"" aria-haspopup=""true"">                
-                        <span>
+                        <span class=""ant-menu-title-content"">
                            Navigation One
                        </span>
                        <i class=""ant-menu-submenu-arrow""></i>
@ -191,7 +186,7 @@
            <ul class=""ant-menu ant-menu-root ant-menu-light ant-menu-inline"" style=""width: 256px;"" id:ignore direction=""ltr"" role=""menu"">        
                <li class=""ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-selected ant-menu-submenu-open"" role=""menuitem"" style=""position:relative;"">
                    <div class=""ant-menu-submenu-title"" style=""padding-left: 24px; "" role=""button"" aria-haspopup=""true"">
-                        <span>
+                        <span class=""ant-menu-title-content"">
                            Navigation One
                        </span>
                        <i class=""ant-menu-submenu-arrow""></i>
@ -254,7 +249,7 @@
            <ul class=""ant-menu ant-menu-root ant-menu-light ant-menu-inline"" style=""width: 256px;"" id:ignore direction=""ltr"" role=""menu"">        
                <li class=""ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-selected"" role=""menuitem"" style=""position:relative;"">
                    <div class=""ant-menu-submenu-title"" style=""padding-left: 24px; "" role=""button"" aria-haspopup=""true"">
-                        <span>
+                        <span class=""ant-menu-title-content"">
                            Navigation One
                        </span>
                        <i class=""ant-menu-submenu-arrow""></i>
@ -317,7 +312,7 @@
            <ul class=""ant-menu ant-menu-root ant-menu-light ant-menu-inline"" style=""width: 256px;"" id:ignore direction=""ltr"" role=""menu"">        
                <li class=""ant-menu-submenu ant-menu-submenu-inline"" role=""menuitem"" style=""position:relative;"">
                    <div class=""ant-menu-submenu-title"" style=""padding-left: 24px; "" role=""button"" aria-haspopup=""true"">
-                        <span>
+                        <span class=""ant-menu-title-content"">
                            Navigation One
                        </span>
                        <i class=""ant-menu-submenu-arrow""></i>
@ -381,7 +376,7 @@
            <ul class=""ant-menu ant-menu-root ant-menu-light ant-menu-inline"" style=""width: 256px;"" id:ignore direction=""ltr"" role=""menu"">        
                <li class=""ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"" role=""menuitem"" style=""position:relative;"">
                    <div class=""ant-menu-submenu-title"" style=""padding-left: 24px; "" role=""button"" aria-haspopup=""true"">
-                        <span>
+                        <span class=""ant-menu-title-content"">
                            Navigation One
                        </span>
                        <i class=""ant-menu-submenu-arrow""></i>
@ -446,7 +441,7 @@
            <ul class=""ant-menu ant-menu-root ant-menu-light ant-menu-inline"" style=""width: 256px;"" id:ignore direction=""ltr"" role=""menu"">        
                <li class=""ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-selected ant-menu-submenu-open"" role=""menuitem"" style=""position:relative;"">
                    <div class=""ant-menu-submenu-title"" style=""padding-left: 24px; "" role=""button"" aria-haspopup=""true"">
-                        <span>
+                        <span class=""ant-menu-title-content"">
                            Navigation One
                        </span>
                        <i class=""ant-menu-submenu-arrow""></i>