Как расфокусировать кнопку в Blazor/C# при нажатии клавиши Escape без использования JavaScript? ⇐ CSS

[Anonymous]

В настоящее время я разрабатываю компонент всплывающей подсказки в рамках Blazor. Функциональность, которую я пытаюсь достичь, заключается в том, чтобы всплывающая подсказка исчезала при нажатии клавиши Escape, когда кнопка находится в фокусе.
Мне удалось реализовать эту функцию с помощью следующего кода: но он основан на JavaScript, которого я бы предпочел избегать, если это возможно.
Вот моя текущая реализация
@inject IJSRuntime JSRuntime

test

Password Rules:

test

@code {
ElementReference tooltip;
bool showTooltip = false;

void ToggleTooltip()
{
showTooltip = !showTooltip;
if (showTooltip)
{
tooltip.FocusAsync();
}
}

async Task CloseTooltip(KeyboardEventArgs e)
{
if (e.Key == "Escape")
{
showTooltip = false;
await JSRuntime.InvokeVoidAsync("Blurred", tooltip);
await InvokeAsync(StateHasChanged);
}
}
}


window.Blurred = function(element) {
element.blur();
};



* {
margin: 0;
padding: 0;
}

[role="tooltip"] {
margin-top: .75rem;
display: none;
position: absolute;
background: black;
color: white;
}

[role="tooltip"]:before {
margin-top: -7px;
content: "";
border: 7px solid transparent;
border-bottom-color: #000;
border-top-width: 0;
position: absolute;
}

button:hover + [role="tooltip"],
button:focus + [role="tooltip"],
[role="tooltip"]:focus {
display: block;
}



Подробнее здесь: https://stackoverflow.com/questions/784 ... hout-using