SimpleSelect - working example, waiting for css fix for not closing the select box upon clicking inside it
This commit is contained in:
parent
ca4aab4002
commit
45380821ad
@ -6,20 +6,53 @@
|
|||||||
|
|
||||||
@if (Items is not null)
|
@if (Items is not null)
|
||||||
{
|
{
|
||||||
<div class="@InputFieldClassList">
|
<div class="@InputFieldClassList">
|
||||||
@if (EnableSearch)
|
|
||||||
{
|
<select type="textarea" style="height:0px;" @attributes=@InputAttributes>
|
||||||
<TextInput Placeholder="Enter search.."
|
</select>
|
||||||
@bind-Value="@SearchText" />
|
@if (IsLabel)
|
||||||
}
|
|
||||||
<select @onchange="@ChangeValueAsync">
|
|
||||||
@foreach (ValueType item in Items)
|
|
||||||
{
|
{
|
||||||
@if (item is not null)
|
<label class="label-animated">@Label</label>
|
||||||
{
|
|
||||||
<option value="@item">@item.ToString()</option>
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</select>
|
|
||||||
</div>
|
<span class="highlight"></span>
|
||||||
|
<span class="bar">
|
||||||
|
</span>
|
||||||
|
<span class="input-glyph-wraper">
|
||||||
|
@if (Clearable)
|
||||||
|
{
|
||||||
|
<span class="input-glyph button">
|
||||||
|
<i class='bx bx-x-circle'></i>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
<span class="input-glyph">
|
||||||
|
<i class='bx bx-caret-down'></i>
|
||||||
|
</span>
|
||||||
|
@if (IsError)
|
||||||
|
{
|
||||||
|
<span class="input-glyph error">
|
||||||
|
<i class='bx bx-error-circle'></i>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
<div class="drop-down">
|
||||||
|
<div class="dropdown-menu p-2" aria-labelledby="dropdownMenuButton">
|
||||||
|
@if (EnableSearch)
|
||||||
|
{
|
||||||
|
<input type="text"
|
||||||
|
placeholder="Enter search string..."
|
||||||
|
class="dropdown-item"
|
||||||
|
@bind-value="@SearchText"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
@foreach (ValueType item in Items)
|
||||||
|
{
|
||||||
|
@if (item is not null)
|
||||||
|
{
|
||||||
|
<div class="dropdown-item" @onclick=@(()=>SetSelectedItem(@item))>@item.ToString()</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
@ -1,7 +1,5 @@
|
|||||||
using Connected.Models;
|
using Connected.Models;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using Microsoft.AspNetCore.Components.Web;
|
|
||||||
using System;
|
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class SimpleSelect<ValueType> : InputBase
|
public partial class SimpleSelect<ValueType> : InputBase
|
||||||
@ -31,6 +29,29 @@ public partial class SimpleSelect<ValueType> : InputBase
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private string DropDownClass { get; set; } = "drop-down";
|
||||||
|
|
||||||
|
bool DropDownClicked = false;
|
||||||
|
|
||||||
|
public void DropDownClassToggle()
|
||||||
|
{
|
||||||
|
DropDownClicked = !DropDownClicked;
|
||||||
|
if (DropDownClicked)
|
||||||
|
{
|
||||||
|
DropDownClass = "";
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
DropDownClass = "drop-down";
|
||||||
|
}
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task SetSelectedItem(ValueType item)
|
||||||
|
{
|
||||||
|
//DropDownClassToggle();
|
||||||
|
await ValueChanged.InvokeAsync(item);
|
||||||
|
}
|
||||||
|
|
||||||
private async Task FilterItems()
|
private async Task FilterItems()
|
||||||
{
|
{
|
||||||
if (string.IsNullOrEmpty(_searchText))
|
if (string.IsNullOrEmpty(_searchText))
|
||||||
@ -61,6 +82,7 @@ public partial class SimpleSelect<ValueType> : InputBase
|
|||||||
if (base.InputAttributes.ContainsKey("required")) base.InputAttributes.Add("required", true);
|
if (base.InputAttributes.ContainsKey("required")) base.InputAttributes.Add("required", true);
|
||||||
}
|
}
|
||||||
OriginalItems = Items;
|
OriginalItems = Items;
|
||||||
|
if (_searchText.Length>0) await FilterItems();
|
||||||
await base.OnInitializedAsync();
|
await base.OnInitializedAsync();
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user