[frontend] Close emoji picker when it loses focus

This commit is contained in:
Lilian 2024-07-10 23:46:00 +02:00
parent fb387c5a33
commit ebdc859d76
No known key found for this signature in database

View file

@ -4,7 +4,7 @@
@if (_display)
{
<div class="emoji-picker @(Fixed ? "fixed" : "")">
<div @ref="EmojiPickerRef" @onfocusout="Close" class="emoji-picker @(Fixed ? "fixed" : "")" tabindex="0">
@foreach (var el in EmojiList)
{
<div class="emoji">
@ -20,6 +20,7 @@
private List<EmojiResponse> EmojiList { get; set; } = [];
private bool _display = false;
private ElementReference EmojiPickerRef { get; set; }
protected override async Task OnInitializedAsync()
{
@ -33,6 +34,20 @@
StateHasChanged();
}
private void Close()
{
_display = false;
StateHasChanged();
}
protected override void OnAfterRender(bool firstRender)
{
if (_display)
{
EmojiPickerRef.FocusAsync();
}
}
public async Task Toggle()
{
_display = !_display;