[HxContextMenu] New PopperStrategy parameter to fix #118 (PR #844)

* Attribute splatting for HxContextMenu dropdown trigger element (reverted) * HxContextMenu.PopperStrategy=Absolute|Fixed --------- Co-authored-by: Robert Haken <[email protected]>
havit · Oct 1, 2024 · b1221a8 · b1221a8
1 parent 2a1ec43
commit b1221a8
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 2 deletions.
diff --git a/BlazorAppTest/Pages/HxGrid_Issue118_Test.razor b/BlazorAppTest/Pages/HxGrid_Issue118_Test.razor
@@ -10,7 +10,7 @@
         <HxGridColumn TItem="CultureInfo" HeaderText="Name" ItemTextSelector="@(item => item.Name)" SortKeySelector="@(item => item.Name)" />
         <HxGridColumn TItem="CultureInfo" HeaderText="EnglishName" ItemTextSelector="@(item => item.EnglishName)" SortKeySelector="@(item => item.EnglishName)" />
         <HxContextMenuGridColumn Context="item">
-            <HxContextMenu>
+            <HxContextMenu PopperStrategy="PopperStrategy.Fixed">@* <-- PopperStrategy.Fixed is the fix *@
                 <h1>@item.DisplayName</h1>
                 <HxContextMenuItem Text="Delete" Icon="BootstrapIcon.Trash" OnClick="() => DeleteItem(item)" />
                 <HxContextMenuItem Text="Clone" Icon="BootstrapIcon.Plus" OnClick="() => CloneItem(item)" />

diff --git a/Havit.Blazor.Components.Web.Bootstrap/ContextMenus/HxContextMenu.razor b/Havit.Blazor.Components.Web.Bootstrap/ContextMenus/HxContextMenu.razor
@@ -2,7 +2,14 @@
 @* PERF!!! Heavily used in data-lists/grids/etc. => do not over-use subcomponents unless absolutely necessary => don't use HxDropdown components here *@
 <div class="@CssClassHelper.Combine("hx-context-menu", CssClassEffective)">
 	<div class="@CssClassHelper.Combine("dropdown", DropdownCssClassEffective)">
-		<div role="button" class="hx-context-menu-btn" id="@_id" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @onclick:stopPropagation>
+		<div role="button"
+			 class="hx-context-menu-btn"
+			 id="@_id"
+			 data-bs-toggle="dropdown"
+			 data-bs-popper-config="@GetPopperConfig()"
+			 aria-haspopup="true"
+			 aria-expanded="false"
+			 @onclick:stopPropagation="true">
 			<HxIcon Icon="IconEffective" CssClass="@IconCssClassEffective" />
 		</div>
 		<ul class="@CssClassHelper.Combine("dropdown-menu", DropdownMenuAlignmentEffective.GetCssClass(), DropdownMenuCssClassEffective)" aria-labelledby="@_id">

diff --git a/Havit.Blazor.Components.Web.Bootstrap/ContextMenus/HxContextMenu.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/ContextMenus/HxContextMenu.razor.cs
@@ -82,5 +82,22 @@ static HxContextMenu()
 	/// </summary>
 	[Parameter] public RenderFragment ChildContent { get; set; }
 
+	/// <summary>
+	/// Popper positioning strategy. Default is <see cref="PopperStrategy.Absolute"/>.
+	/// </summary>
+	[Parameter] public PopperStrategy PopperStrategy { get; set; } = PopperStrategy.Absolute;
+
+
 	private string _id = "hx" + Guid.NewGuid().ToString("N");
+
+	private string GetPopperConfig()
+	{
+		if (PopperStrategy == PopperStrategy.Absolute)
+		{
+			return null; // data-bs-popper-config is not needed for the default strategy
+		}
+		return $$"""
+			{"strategy": "{{PopperStrategy.ToString().ToLowerInvariant()}}"}
+			""";
+	}
 }
diff --git a/Havit.Blazor.Components.Web.Bootstrap/ContextMenus/PopperStrategy.cs b/Havit.Blazor.Components.Web.Bootstrap/ContextMenus/PopperStrategy.cs
@@ -0,0 +1,11 @@
+namespace Havit.Blazor.Components.Web.Bootstrap;
+
+/// <summary>
+/// Popper positioning strategy.
+/// <a href="https://popper.js.org/docs/v2/constructors/#strategy">Related Popper.js documentation</a>.
+/// </summary>
+public enum PopperStrategy
+{
+	Absolute = 0,
+	Fixed = 1,
+}
diff --git a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml
@@ -1559,6 +1559,11 @@
             Items of the context menu. Use <see cref="T:Havit.Blazor.Components.Web.Bootstrap.HxContextMenuItem"/> components.
             </summary>
         </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxContextMenu.PopperStrategy">
+            <summary>
+            Popper positioning strategy. Default is <see cref="F:Havit.Blazor.Components.Web.Bootstrap.PopperStrategy.Absolute"/>.
+            </summary>
+        </member>
         <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxContextMenuItem.Text">
             <summary>
             Item text.
@@ -1615,6 +1620,12 @@
         <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxContextMenuItem.Enabled">
             <inheritdoc cref="P:Havit.Blazor.Components.Web.Infrastructure.ICascadeEnabledComponent.Enabled" />
         </member>
+        <member name="T:Havit.Blazor.Components.Web.Bootstrap.PopperStrategy">
+            <summary>
+            Popper positioning strategy.
+            <a href="https://popper.js.org/docs/v2/constructors/#strategy">Related Popper.js documentation</a>.
+            </summary>
+        </member>
         <member name="T:Havit.Blazor.Components.Web.Bootstrap.DropdownAutoClose">
             <summary>
             Auto-close behavior of the <see cref="T:Havit.Blazor.Components.Web.Bootstrap.HxDropdown"/> (<see cref="T:Havit.Blazor.Components.Web.Bootstrap.HxDropdownToggleButton"/> respectively).