onfocusout阻止下拉菜单项在Blazor中单击

Question

爱着Blazor。

我想要一个下拉菜单在我离开时关闭。

我已经在周围的div中添加了onfocusout，以将showDropdown切换设置为false，这将使菜单关闭。

然而，这会禁用菜单项的onclick事件(例如，运行下面的UpdateDate方法)，因为看起来，onfocusout事件是首先激活的。

<h3>@date</h3>
<div type="button" class="race-info-item" @onfocusout="e => showDropdown = false">

<button @onclick="e => showDropdown = !showDropdown">Show dropdown</button>

<div class="dropdown-menu select-class-dropdown @(showDropdown ? "show" : "")" >
    <div class="button" @onclick="UpdateDate">Update date</div>
    <div class="button" @onclick="e => showDropdown = false">Cancel</div>
</div>

</div>

private bool showDropdown = false;
private DateTime date = DateTime.Now;

private void UpdateDate()
{
    date = DateTime.Now;
    showDropdown = false;
}

private async Task OutFocus()
{
    await Task.Delay(100);
    showDropdown = false;
}

将上面的OutFocus()方法替换为onfocusout似乎确实解决了这个问题，但引入线程延迟对我来说就像是在胡扯，也不是很优雅。

我也尝试过为menu @onclick事件添加@onclick:stopPropagation="true“，但这也不起作用--看起来onfocusout事件仍然是最先到达的。

很难相信这是一个很难解决的问题，而且没有一个直接的逻辑解决方案。我不了解javascript (这就是为什么我在使用Blazor)，所以我不想研究JS互操作。

提前感谢您的任何建议！

Answer 1

在花了一整天的时间在这个问题上，然后把问题贴出来之后，我想我只是在https://stackoverflow.com/a/47944833/15410916上偶然发现了答案

对菜单项使用onmousedown，而不是onclick。现在似乎起作用了。

<h3>@date</h3>

<div type="button" class="race-info-item" @onfocusout="e => showDropdown = false">

<button @onclick="e => showDropdown = !showDropdown">Show dropdown</button>

<div class="dropdown-menu select-class-dropdown @(showDropdown ? "show" : "")" >
    <div class="button" @onmousedown="UpdateDate">Update date</div>
    <div class="button" @onmousedown="e => showDropdown = false">Cancel</div>
</div>

</div>

欢迎任何关于这样做是否有任何负面影响的意见。