I have:

<div @onfocusout="@((e) => HidedicList(e))">
   <input for="toggleVendors" class="form-control label-toggle" placeholder="Vendor Information" @onchange="selectedValue" @onfocus="@((e) => ShowdicList(e))" />
    <input type="checkbox" id="toggleVendors" class="hidden-checkbox" >
    <div id="diclist" class="@showhide">
        <ul>
            @foreach (var item in (Dictionary<int,string>)this.selectListItems.Items)
            {
                <li><input type="checkbox" id="@item.Key" @onchange="@((e) => CheckboxChanged(e, @item.Key))" value="@item.Value" /> @item.Value</li>
            }
        </ul>
    </div>
</div>

I am trying to ‘roll my own’ dropdown (there are valid reasons why I cant use existing methods such as a datalist with options) everything seems to work accept when focus is lost on the whole div, i want to close the inner div. So I click into my input box and my inner div shows my items. As soon as I start attempting to select one of my checkboxes in the list, the onfocusout event triggers on my outer div. If I move the event to my inner div, it doesn’t trigger the event straight away, but it still triggers after I’ve made a selection of a checkbox in the list.