How to programmatically hide a Bootstrap Offcanvas component with JavaScript and Blazor?

I have a Blazor .Net 8 webb app that uses a Bootstrap 5.3 Offcanvas component as a menu of items that can be selected from. When the user chooses the menu item, I want the Offcanvas component to close automatically.

The way I did this was to create a ButtonClicked event that calls the JavaScript like this

`await JS.InvokeVoidAsync("closeOffcanvas");`

This is called right before the OnFilterSelected EventCallback

For the Bootstrap I'm using data-bs attributes. I searched extensively for a solution to no avail. The JavaScript I came up with can be seen below closeOffcanvas.js below). I'm at best a novice java script programmer

Below is the relevant code, for a working example see this GitHub repo

Any help would be appreciative.

closeOffcanvas.js

window.closeOffcanvas = function () {  var offcanvasElement = document.getElementById("offcanvasid");  var offcanvas = new bootstrap.Offcanvas(offcanvasElement);  offcanvas.hide();};

Filter.razor

<button class="btn btn-primary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#offcanvasid">  Contents<i class="fas fa-bars"></i></button><div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasid"><div class="offcanvas-header"><span class=""></span><button type="button" class="btn-close"            data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><ul class="list-group">      @foreach (var item in Enums.MenuItem.List.OrderBy(o => o.Value))      {<li class="list-group-item @ActiveFilter(item)"><a @onclick="@(e => ButtonClicked(item))"             type="button"             id="@item.ButtonId">            @item.Value <small>@item.Title</small></a></li>      }</ul></div></div>

@code

  [Parameter, EditorRequired] public required Enums.MenuItem? CurrentFilter { get; set; }  [Parameter] public EventCallback<Enums.MenuItem> OnFilterSelected { get; set; }  protected Enums.MenuItem currentMenuItem = Enums.MenuItem.HebrewPassOverOrCrossOver;  private async Task ButtonClicked(Enums.MenuItem filter)  {    currentMenuItem = filter;    // calling this doesn't close the component     //   It also disables the close button    await JS.InvokeVoidAsync("closeOffcanvas");     await OnFilterSelected.InvokeAsync(filter);  }// other code

Index.razor

This is the razor page that calls Filter.razor component

@page "/"<h1>Home</h1><div class="d-flex justify-content-end mx-1"><Filter CurrentFilter=@CurrentFilter OnFilterSelected="@ReturnedFilter" /></div><!-- Do something with the chosen filter -->

@code

  public MenuItem CurrentFilter { get; set; } = MenuItem.HebrewPassOverOrCrossOver; // default item  private void ReturnedFilter(MenuItem filter)  {    CurrentFilter = filter;    StateHasChanged();  }