[HxDropdown] Ability to update DropdownReference

BlazorAppTest/BlazorAppTest.csproj

@@ -28,10 +28,4 @@
 		</Compile>
 	</ItemGroup>
 
-	<ItemGroup>
-	  <Content Update="Pages\HxMultiSelect_Issue791_Test.razor">
-	    <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
-	  </Content>
-	</ItemGroup>
-
 </Project>

BlazorAppTest/Pages/HxDropdown_UpdateReference_Test.razor

@@ -0,0 +1,38 @@
+@page "/HxDropdown_UpdateReference_Test"
+
+<h1>HxDropdown</h1>
+
+<HxDropdown>
+	<HxDropdownToggleElement @ref="dropdownToggleComponent" DropdownReference="@_dropdownReference" />
+	<HxDropdownContent CssClass="@(IsBold ? "bg-light" : null)">
+		<div class="row m-3" style="min-width: 100px;">
+			<div class="col">
+				<div>
+					<HxCheckbox @bind-Value="IsBold" Text="Toggle button text bold" />
+				</div>
+			</div>
+		</div>
+	</HxDropdownContent>
+</HxDropdown>
+
+<HxButton id="button1" OnClick="HandleShow1">Show 1</HxButton>
+<HxButton id="button2" OnClick="HandleShow2">Show 2</HxButton>
+
+
+@code {
+	private HxDropdownToggleElement dropdownToggleComponent;
+	private bool IsBold { get; set; } = false;
+	private string _dropdownReference = "#button1";
+
+	private async Task HandleShow1()
+	{
+		_dropdownReference = "#button1";
+		await dropdownToggleComponent.ShowAsync();
+	}
+
+	private async Task HandleShow2()
+	{
+		_dropdownReference = "#button2";
+		await dropdownToggleComponent.ShowAsync();
+	}
+}

Havit.Blazor.Components.Web.Bootstrap/Dropdowns/HxDropdownToggleElement.cs

@@ -94,6 +94,8 @@ public class HxDropdownToggleElement : ComponentBase, IHxDropdownToggle, IAsyncD
 	private ElementReference _elementReference;
 	private DotNetObjectReference<HxDropdownToggleElement> _dotnetObjectReference;
 	private IJSObjectReference _jsModule;
+	private string _currentDropdownJsOptionsReference;
+	private Queue<Func<Task>> _onAfterRenderTasksQueue = new();
 	private bool _disposed;
 
 	public HxDropdownToggleElement()
@@ -162,34 +164,67 @@ protected virtual string GetCssClass()
 	/// <inheritdoc cref="ComponentBase.OnAfterRenderAsync(bool)" />
 	protected override async Task OnAfterRenderAsync(bool firstRender)
 	{
-		await base.OnAfterRenderAsync(firstRender);
+		var dropdownJsOptionsReference = DropdownToggleExtensions.GetDropdownJsOptionsReference(this);
+
 		if (firstRender)
 		{
 			await EnsureJsModuleAsync();
 			if (_disposed)
 			{
 				return;
 			}
-			await _jsModule.InvokeVoidAsync("create", _elementReference, _dotnetObjectReference, DropdownToggleExtensions.GetDropdownJsOptionsReference(this));
+			_currentDropdownJsOptionsReference = dropdownJsOptionsReference;
+			await _jsModule.InvokeVoidAsync("create", _elementReference, _dotnetObjectReference, _currentDropdownJsOptionsReference);
+		}
+		else
+		{
+			if (dropdownJsOptionsReference != _currentDropdownJsOptionsReference)
+			{
+				_currentDropdownJsOptionsReference = dropdownJsOptionsReference;
+				if (_jsModule is not null)
+				{
+					await _jsModule.InvokeVoidAsync("update", _elementReference, dropdownJsOptionsReference);
+				}
+			}
+		}
+
+		// for show/hide/... the dropdown has to be created/updated first 
+		while (_onAfterRenderTasksQueue.TryDequeue(out var task))
+		{
+			await task();
 		}
 	}
 
 	/// <summary>
 	/// Shows the dropdown.
 	/// </summary>
-	public async Task ShowAsync()
+	public Task ShowAsync()
 	{
-		await EnsureJsModuleAsync();
-		await _jsModule.InvokeVoidAsync("show", _elementReference);
+		_onAfterRenderTasksQueue.Enqueue(async () =>
+		{
+			await EnsureJsModuleAsync();
+			await _jsModule.InvokeVoidAsync("show", _elementReference);
+		});
+
+		StateHasChanged(); // ensure re-rendering
+
+		return Task.CompletedTask;
 	}
 
 	/// <summary>
 	/// Hides the dropdown.
 	/// </summary>
-	public async Task HideAsync()
+	public Task HideAsync()
 	{
-		await EnsureJsModuleAsync();
-		await _jsModule.InvokeVoidAsync("hide", _elementReference);
+		_onAfterRenderTasksQueue.Enqueue(async () =>
+		{
+			await EnsureJsModuleAsync();
+			await _jsModule.InvokeVoidAsync("hide", _elementReference);
+		});
+
+		StateHasChanged(); // ensure re-rendering
+
+		return Task.CompletedTask;
 	}
 
 	/// <summary>

Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxDropdown.js

@@ -17,6 +17,27 @@
 	}
 }
 
+export function update(element, newReference) {
+	if (!element) {
+		return;
+	}
+
+	var d = bootstrap.Dropdown.getInstance(element);
+	if (d) {
+		d.dispose();
+	}
+
+	if (newReference) {
+		var referenceOption = document.querySelector(newReference);
+		var d = new bootstrap.Dropdown(element, {
+			reference: referenceOption
+		});
+	}
+	else {
+		var d = new bootstrap.Dropdown(element);
+	}
+}
+
 export function show(element) {
 	var d = bootstrap.Dropdown.getInstance(element);
 	if (d) {