Add callback for Open and Close to RadzenDropDown (#1771)

Co-authored-by: jmauch <[email protected]>

Radzen.Blazor/RadzenDropDown.razor.cs

@@ -19,6 +19,7 @@ namespace Radzen.Blazor
     /// </example>
     public partial class RadzenDropDown<TValue> : DropDownBase<TValue>
     {
+        bool isOpen;
         /// <summary>
         /// Specifies additional custom attributes that will be rendered by the input.
         /// </summary>
@@ -117,8 +118,8 @@ internal override async Task ClosePopup(string key)
                 of = OpenOnFocus;
                 OpenOnFocus = false;
             }
-
-            await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
+            isOpen = false;
+            await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID, Reference, nameof(OnClose));
 
             if (key == "Enter")
             {
@@ -138,7 +139,20 @@ protected override async Task OpenPopup(string key = "ArrowDown", bool isFilter
             if (Disabled)
                 return;
 
-            await JSRuntime.InvokeVoidAsync(OpenOnFocus ? "Radzen.openPopup" : "Radzen.togglePopup", Element, PopupID, true);
+            if (!isOpen)
+            {
+                await Open.InvokeAsync(null);
+            }
+
+            isOpen = true;
+            if (OpenOnFocus)
+            {
+                await JSRuntime.InvokeVoidAsync("Radzen.openPopup", Element, PopupID, true, null, null, null, Reference, nameof(OnClose));
+            }
+            else
+            {
+                await JSRuntime.InvokeVoidAsync("Radzen.togglePopup", Element, PopupID, true, Reference, nameof(OnClose));
+            }
             await JSRuntime.InvokeVoidAsync("Radzen.focusElement", isFilter ? UniqueID : SearchID);
 
             if (list != null && selectedIndex != -1)
@@ -198,6 +212,18 @@ internal override void RenderItem(RenderTreeBuilder builder, object item)
         [Parameter]
         public string SelectAllText { get; set; }
 
+        /// <summary>
+        /// Callback for when a dropdown is opened.
+        /// </summary>
+        [Parameter]
+        public EventCallback Open { get; set; }
+
+        /// <summary>
+        /// Callback for when a dropdown is closed.
+        /// </summary>
+        [Parameter]
+        public EventCallback Close { get; set; }
+
         private bool visibleChanged = false;
         private bool disabledChanged = false;
         private bool firstRender = true;
@@ -284,7 +310,8 @@ protected override async Task OnSelectItem(object item, bool isFromKey = false)
             {
                 if (!Multiple && !isFromKey)
                 {
-                    await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
+                    isOpen = false;
+                    await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID, Reference, nameof(OnClose));
                 }
 
                 if (ClearSearchAfterSelection)
@@ -337,9 +364,17 @@ public override void Dispose()
             }
         }
 
+        [JSInvokable]
+        public async Task OnClose()
+        {
+            isOpen = false;
+            await Close.InvokeAsync();
+        }
+
         internal async Task PopupClose()
         {
-            await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
+            isOpen = false;
+            await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID, Reference, nameof(OnClose));
         }
     }
 }

RadzenBlazorDemos/Pages/DropDownOpenCloseEvent.razor

@@ -0,0 +1,18 @@
+@inherits DbContextPage
+
+<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="0.5rem" class="rz-p-sm-12">
+    <RadzenLabel Text="Select Value" Component="DropDownChangeEvent" />
+    <RadzenDropDown TValue="string" Value=@value Data=@companyNames Open="@(() => Console.WriteLine("opened"))" Close="@(()=>Console.WriteLine("closed"))" Style="width: 100%; max-width: 400px;" Name="DropDownChangeEvent" />
+</RadzenStack>
+
+@code {
+    string value = "Around the Horn";
+    IEnumerable<string> companyNames;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        companyNames = dbContext.Customers.Select(c => c.CompanyName).Distinct();
+    }
+}

RadzenBlazorDemos/Pages/DropDownPage.razor

@@ -62,6 +62,12 @@
 <RadzenExample ComponentName="DropDown" Example="DropDownEdit">
     <DropDownEdit/>
 </RadzenExample>
+<RadzenText Anchor="dropdown#open-and-close-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
+    Open and close events
+</RadzenText>
+<RadzenExample ComponentName="DropDown" Example="DropDownOpenCloseEvent">
+    <DropDownOpenCloseEvent />
+</RadzenExample>
 
 <RadzenText Anchor="dropdown#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
     Keyboard Navigation