My checkedbox dropdownnlist doesnt close when I clicked outside of dropdownlist

I customized a check dropdown selected value in .net6 balzor but checkedbox dropdownlist doesnt close when I clicked outside of dropdownlist.

    function showMain() {
    var checkList = document.getElementById('list1');
    checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
        if (checkList.classList.contains('visible'))
            checkList.classList.remove('visible');
        else
            checkList.classList.add('visible');
    }
}

and css style as bellow:

<style>
    .dropdown-check-list {
        display: inline-block;
    }
        .dropdown-check-list .anchor {
            position: relative;
            cursor: pointer;
            display: inline-block;
            padding: 5px 50px 5px 10px;
            border: 1px solid #ccc;
        }
            .dropdown-check-list .anchor:after {
                position: absolute;
                content: "";
                border-left: 2px solid black;
                border-top: 2px solid black;
                padding: 5px;
                right: 10px;
                top: 20%;
                -moz-transform: rotate(-135deg);
                -ms-transform: rotate(-135deg);
                -o-transform: rotate(-135deg);
                -webkit-transform: rotate(-135deg);
                transform: rotate(-135deg);
            }
            .dropdown-check-list .anchor:active:after {
                right: 8px;
                top: 21%;
            }
        .dropdown-check-list ul.items {
            padding: 2px;
            display: none;
            margin: 0;
            border: 1px solid #ccc;
            border-top: none;
        }
            .dropdown-check-list ul.items li {
                list-style: none;
            }
        .dropdown-check-list.visible .anchor {
            color: #0094ff;
        }
        .dropdown-check-list.visible .items {
            display: block;
        }
</style>

And blazor C# code:

@code
{
  List<CarsSel> LstcarsSels = new List<CarsSel>();
    private void CheckboxChanged2(CarsSel sel)
    {
        sel.IsChecked = !sel.IsChecked;
        Console.WriteLine($"Checkbox changed {sel.CarID.ToString() + " ------ " + sel.CarName + " ----- " + sel.IsChecked.ToString()}");
    }    
    public async Task ShowAlertWindow()
    {
        await JSRuntime.InvokeVoidAsync("showMain");    
    }
    protected override async Task OnInitializedAsync()
    {
        CarsSel carsSel;
        for (int i = 1; i<= 5; i++)
        {
            carsSel = new CarsSel();
            carsSel.CarID = i;
            carsSel.CarName = i.ToString() + DateTime.Now.Ticks.ToString();
            carsSel.IsChecked = false;
            LstcarsSels.Add(carsSel);
        }
    }
    public class CarsSel
    {
        public int CarID { get; set; }
        public String CarName { get; set; }
        public Boolean IsChecked { get; set; }        
    }
}

I am looking for a function that closes automatically when clicking outside dropdown checked. OK.

dropdown source you can see as bello:

<div id="list1" class="dropdown-check-list" tabindex="100">
    <span class="anchor">Select Here Itemos</span>
    <ul class="items">
        @if (LstcarsSels.Count > 0)
        {
            foreach (var item in LstcarsSels)
            {
                <li><input type="checkbox" checked="@item.IsChecked" @oninput="(() => CheckboxChanged2(item))" value="@item.CarID" />@item.CarName </li> 
            }
        }
    </ul>
</div>