Fix Splitter Infinite Loop (#373)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.UnitTests/Components/RenderTests.cs

@@ -34,6 +34,13 @@ public void SpeedDialPageRenderTest()
             comp.Markup.Should().NotBeNullOrEmpty();
         }
 
+        [Test]
+        public void SplitterPageRenderTest()
+        {
+            var comp = Context.RenderComponent<SplitterPage>();
+            comp.Markup.Should().NotBeNullOrEmpty();
+        }
+
         [Test]
         public void StepperPageRenderTest()
         {

CodeBeam.MudBlazor.Extensions/Components/Splitter/MudSplitter.razor

@@ -2,7 +2,8 @@
 @inherits MudComponentBase
 
 <div class="@Classname" style="@Style">
-    <MudSlider @ref="_slider" Value="@Dimension" ValueChanged="@UpdateDimension" ondblclick="@OnDoubleClick()"
+    @* Don't make OnDoubleClick to method, causes infinite loop *@
+    <MudSlider @ref="_slider" @bind-Value="@Dimension" @bind-Value:after="@(() => UpdateDimension(_slider.Value))" ondblclick="@OnDoubleClick"
                T="double" Min="0" Max="100" Step="@Sensitivity" Disabled="@(!EnableSlide)"
                Class="@SliderClassname" Style="overflow: hidden; z-index: 6" />
 

CodeBeam.MudBlazor.Extensions/Components/Splitter/MudSplitter.razor.cs

@@ -142,7 +142,7 @@ public partial class MudSplitter : MudComponentBase
         public EventCallback<double> DimensionChanged { get; set; }
 
         /// <summary>
-        /// 
+        /// Fires when double click.
         /// </summary>
         [Parameter]
         public EventCallback OnDoubleClicked { get; set; }
@@ -159,7 +159,7 @@ public partial class MudSplitter : MudComponentBase
         /// </summary>
         /// <param name="percentage"></param>
         /// <returns></returns>
-        protected Task UpdateDimension(double percentage)
+        protected async Task UpdateDimension(double percentage)
         {
             Dimension = percentage;
 
@@ -169,17 +169,19 @@ protected Task UpdateDimension(double percentage)
                 Dimension = 100;
 
             if (DimensionChanged.HasDelegate)
-                _ = DimensionChanged.InvokeAsync(percentage);
+            {
+                await DimensionChanged.InvokeAsync(percentage);
+            }
 
-            return Task.CompletedTask;
+            //return Task.CompletedTask;
         }
 
-        Task OnDoubleClick()
+        private async Task OnDoubleClick()
         {
             if (OnDoubleClicked.HasDelegate)
-                _ = OnDoubleClicked.InvokeAsync();
+                await OnDoubleClicked.InvokeAsync();
 
-            return Task.CompletedTask;
+            //return Task.CompletedTask;
         }
     }
 }

ComponentViewer.Docs/Pages/Examples/SplitterExample1.razor

@@ -39,19 +39,23 @@
 </MudGrid>
 
 @code {
-   MudSplitter? _splitter;
-   Color _color;
-   string _height = "400px";
-   double _sensitivity = 0.1d;
-   double _percentage = 50;
-   bool _sliderEnabled = true;
-   bool _marginEnabled = true;
-   bool _borderedEnabled = true;
-   bool _doubleClickEnabled = true;
+    MudSplitter? _splitter;
+    Color _color;
+    string _height = "400px";
+    double _sensitivity = 0.1d;
+    double _percentage = 50;
+    bool _sliderEnabled = true;
+    bool _marginEnabled = true;
+    bool _borderedEnabled = true;
+    bool _doubleClickEnabled = true;
 
-   void OnDoubleClicked()
-   {
-      if (_doubleClickEnabled)
-         _percentage = 50;
+    private Task OnDoubleClicked()
+    {
+        if (_doubleClickEnabled)
+        {
+            _percentage = 50;
+        }
+        
+        return Task.CompletedTask;
    }
 }