@page "/"
<PageTitle>Aria combo box</PageTitle>
<h1>Aria combo box</h1>
<input type="text"
role="combobox"
aria-label="State selector combo box"
aria-describedby="state-selector-input-guidance"
aria-autocomplete="both"
aria-controls="state-selector-dropdown"
aria-expanded="@DropdownOpen"
aria-activedescendant="@GetActiveDescendantId()"
@onkeydown="OnKeyDown"
@oninput="OnInput"
/>
@if (DropdownOpen)
{
<ol role="listbox"
id="state-selector-dropdown"
>
@for (int i = 0; i < DisplayedOptions.Count; ++i)
{
bool thisOptionIsSelected = i == _selectedOptionIndex;
string style = thisOptionIsSelected ? "background: orange;" : "";
<li id="state-selector-dropdown-option-@i"
role="option"
style="@style"
aria-valuetext="@DisplayedOptions[i]"
aria-selected="@thisOptionIsSelected"
>
@DisplayedOptions[i]
</li>
}
</ol>
}
<div id="state-selector-input-guidance">
Use this to select a US state or territory.
Start typing the name of a state and options will appear.
You can't actually select an option, because that isn't important for the purposes of this demo.
</div>
@code {
private IReadOnlyList<string> DisplayedOptions = new string[0];
private bool DropdownOpen { get; set; }
private int _selectedOptionIndex = 0;
private string GetActiveDescendantId()
=> DisplayedOptions.Count() > 0 ? $"state-selector-dropdown-option-{_selectedOptionIndex}" : "";
private void OnInput(ChangeEventArgs args)
{
string newValue = args.Value?.ToString() ?? "";
DisplayedOptions = _states.Where(s => s.StartsWith(newValue, StringComparison.OrdinalIgnoreCase)).ToArray();
DropdownOpen = newValue.Length > 0 && DisplayedOptions.Any();
_selectedOptionIndex = 0;
}
private void OnKeyDown(KeyboardEventArgs args)
{
switch (args.Key)
{
case "ArrowUp":
if (DisplayedOptions.Count > 1)
{
--_selectedOptionIndex;
if (_selectedOptionIndex < 0)
{
_selectedOptionIndex = DisplayedOptions.Count() - 1;
}
}
break;
case "ArrowDown":
if (DisplayedOptions.Count > 1)
{
++_selectedOptionIndex;
if (_selectedOptionIndex >= DisplayedOptions.Count())
{
_selectedOptionIndex = 0;
}
}
break;
}
}
private readonly IReadOnlyList<string> _states = new []
{
"Alabama", "Alaska", "American Samoa", "Arizona", "Arkansas", "California", "Colorado", "Connecticut",
"Delaware", "District of Columbia", "Florida", "Georgia", "Guam", "Hawaii", "Idaho", "Illinois", "Indiana",
"Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico",
"New York", "North Carolina", "North Dakota", "Northern Marianas Islands", "Ohio", "Oklahoma", "Oregon",
"Pennsylvania", "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia", "Virgin Islands", "Washington", "West Virginia", "Wisconsin", "Wyoming",
};
}