[frontend] Close emoji picker when it loses focus
This commit is contained in:
parent
fb387c5a33
commit
ebdc859d76
1 changed files with 16 additions and 1 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Reference in a new issue