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.