Popover uses ElementReference to reference source and target

Fixes bug with Popover and multiple tables on the same page
IvanJosipovic · Dec 4, 2019 · 26d9b4d · 26d9b4d
1 parent 8b8dd21
commit 26d9b4d
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 7 deletions.
diff --git a/src/BlazorTable/Components/Column.razor b/src/BlazorTable/Components/Column.razor
@@ -2,7 +2,7 @@
 @typeparam TableItem
 
 <CascadingValue Value="(IColumn<TableItem>)this" Name="Column">
-    <Popover Target="@($"Filter-{Title}")" IsOpen="@FilterOpen" Placement="Placement.Bottom" DismissOnNextClick="false">
+    <Popover Reference="@this.FilterRef" IsOpen="@FilterOpen" Placement="Placement.Bottom" DismissOnNextClick="false">
         <h3 class="popover-header">Filter</h3>
         <div class="popover-body">
 

diff --git a/src/BlazorTable/Components/Column.razor.cs b/src/BlazorTable/Components/Column.razor.cs
@@ -52,6 +52,8 @@ public string Title
 
         public Type Type { get; private set; }
 
+        public ElementReference FilterRef { get; set; }
+
         public IFilter<TableItem> FilterControl { get; set; }
 
         public void Dispose()

diff --git a/src/BlazorTable/Components/Popover.razor.cs b/src/BlazorTable/Components/Popover.razor.cs
@@ -37,7 +37,7 @@ public bool? IsOpen
         public Placement Placement { get; set; } = Placement.Auto;
 
         [Parameter]
-        public string Target { get; set; }
+        public ElementReference Reference { get; set; }
 
         [Parameter]
         public RenderFragment ChildContent { get; set; }
@@ -75,7 +75,7 @@ protected override void OnAfterRender(bool firstrun)
             if (IsOpen ?? false)
             {
                 var placement = Placement.ToDescriptionString();
-                JSRuntime.InvokeVoidAsync("BlazorTablePopper", Target, MyRef, Arrow, placement);
+                JSRuntime.InvokeVoidAsync("BlazorTablePopper", Reference, MyRef, Arrow, placement);
             }
         }
 

diff --git a/src/BlazorTable/Components/Table.razor b/src/BlazorTable/Components/Table.razor
@@ -26,7 +26,7 @@
                         @if (column.Filterable)
                         {
                             <div class="float-right">
-                                <a href="javascript:;" id="@($"Filter-{column.Title}")" @onclick="@((x) => column.ToggleFilter())" style="text-decoration: none"><span style="@(column.Filter == null ? "opacity: 0.2;" : string.Empty)">&#128269;</span></a>
+                                <a href="javascript:;" @ref="column.FilterRef" id="@($"Filter-{column.Title}")" @onclick="@((x) => column.ToggleFilter())" style="text-decoration: none"><span style="@(column.Filter == null ? "opacity: 0.2;" : string.Empty)">&#128269;</span></a>
                             </div>
                         }
                     </th>

diff --git a/src/BlazorTable/Interfaces/IColumn.cs b/src/BlazorTable/Interfaces/IColumn.cs
@@ -97,5 +97,10 @@ public interface IColumn<TableItem>
         /// Horizontal alignment
         /// </summary>
         Align Align { get; set; }
+
+        /// <summary>
+        /// Filter Icon Element
+        /// </summary>
+        ElementReference FilterRef { get; set; }
     }
 }
diff --git a/src/BlazorTable/wwwroot/BlazorTable.min.js b/src/BlazorTable/wwwroot/BlazorTable.min.js