ant-design-blazor/components/select/Select.razor

@namespace AntDesign
@inherits AntInputComponentBase<string>

<CascadingValue Value=this>
    <div class="@ClassMapper.Class" style="@Style" id="@Id" title="@Title" tabindex="-1" @onclick="OnSelectOpenClick" @ref="Ref">
        @switch (SelectMode)
        {
            case SelectMode.Default:
                {
                    var selectedOption = SelectedOptions.FirstOrDefault();
                    <div class="@ClassPrefix-selector">
                        <span class="@ClassPrefix-selection-search">
                            <input @ref="_inputRef"
                                   @oninput="OnInput" @onblur="OnInputBlur"
                                   id="@Id"
                                   value="@_searchValue"
                                   role="combobox"
                                   readonly="@(!_isSelectOpened)"
                                   class="@ClassPrefix-selection-search-input"
                                   style="@(_isSelectOpened ? "" : "opacity:0")"
                                   autocomplete="off"
                                   aria-owns="@(Id)_list"
                                   aria-expanded="@_isSelectOpened"
                                   aria-autocomplete="list"
                                   aria-controls="@(Id)_list" />
                        </span>
                        @if (ShowPlaceholder)
                        {
                            <span class="ant-select-selection-placeholder">@Placeholder</span>
                        }
                        else if (string.IsNullOrEmpty(_searchValue) && selectedOption != null)
                        {
                            var showValue = GetShowValue(selectedOption);
                            @if (showValue.IsT0)
                            {
                                <span class="ant-select-selection-item">@showValue.AsT0 </span>
                            }
                            else
                            {
                                <span class="ant-select-selection-item">@showValue.AsT1 </span>
                            }
                        }
                    </div>
                    break;
                }
            default:
                {
                    <div class="@ClassPrefix-selector">
                        @foreach (var option in SelectedOptions)
                        {
                            if (TagRender != null)
                            {
                                <span>@TagRender(GetProperties(option))</span>
                            }
                            else
                            {
                                var showValue = GetShowValue(option);
                                <span class="@ClassPrefix-selection-item">
                                    <span class="@ClassPrefix-selection-item-content">
                                        @if (showValue.IsT0)
                                        {
                                            @showValue.AsT0
                                        }
                                        else
                                        {
                                            @showValue.AsT1
                                        }
                                    </span>

                                    <span unselectable="on" aria-hidden="true" style="user-select: none;" class="@ClassPrefix-selection-item-remove"
                                          @onclick="()=>OnRemoveSelected(option)" @onclick:stopPropagation="true">
                                        <Icon Type="close"></Icon>
                                    </span>
                                </span>
                            }
                        }
                        <span class="@ClassPrefix-selection-search" style="width:@_inputWidth">
                            <input @ref="_inputRef"
                                   @oninput="OnInput" @onblur="OnInputBlur"
                                   @bind-value="@_searchValue"
                                   id="@Id"
                                   role="combobox"
                                   readonly="@(!_isSelectOpened)"
                                   class="@ClassPrefix-selection-search-input"
                                   style="@(_isSelectOpened?"":"opacity:0")"
                                   autocomplete="off"
                                   aria-owns="@(Id)_list"
                                   aria-expanded="@_isSelectOpened"
                                   aria-autocomplete="list"
                                   aria-controls="@(Id)_list" />
                            <span class="@ClassPrefix-selection-search-mirror" aria-hidden="true">&nbsp;</span>
                        </span>
                        @if (ShowPlaceholder)
                        {
                            <span class="ant-select-selection-placeholder">@Placeholder</span>
                        }
                    </div>
                    break;
                }
        }

        @if (ShowArrow && SelectMode == SelectMode.Default)
        {
            if (SuffixIcon != null)
            {
                <span class="ant-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;">
                    @SuffixIcon
                </span>
            }
            else if (Loading)
            {
                <span class="ant-select-arrow ant-select-arrow-loading" unselectable="on" aria-hidden="true" style="user-select: none;">
                    <Icon Type="loading"></Icon>
                </span>
            }
            else
            {
                <span class="ant-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;">
                    @if (ShowSearch && _isSelectOpened)
                    {
                        <Icon Type="search"></Icon>
                    }
                    else
                    {
                        <Icon Type="down"></Icon>
                    }
                </span>
                @if (AllowClear && HasValue)
                {
                    <span class="ant-select-clear" unselectable="on" aria-hidden="true" style="user-select: none;" @onclick="OnClearClick">
                        <Icon Type="close-circle"></Icon>
                    </span>
                }
            }
        }
    </div>
    <div style="position: absolute; top: 0px; left: 0px; width: 100%;" @ref="_dropdownRef">
        <div>
            <div class="@(ClassPrefix)-dropdown @_dropdownClassMapper.Class" style="@_dropdownStyle" tabindex="-1"
                 @onblur="OnSelectHideClick" @onmouseenter="OnSelectMouseEnter" @onmouseleave="OnSelectMouseLeave">
                <div>
                    @if (IsEmptyOnSearch())
                    {
                        <div role="listbox" id="@(Id)_list" class="@ClassPrefix-item-empty">
                            @if (NotFoundContent != null)
                            {
                                @NotFoundContent
                            }
                            else
                            {
                                <Empty Image="Empty.PRESENTED_IMAGE_SIMPLE" Small="true" />
                            }
                        </div>
                    }
                    else
                    {
                        <div role="listbox" id="@(Id)_list" style="height: 0px; width: 0px; overflow: hidden;">
                            @for (var i = 0; SelectOptions.Count > i; ++i)
                            {
                                var selectOption = SelectOptions[i];
                                <div id="@(Id)_list_@(i)" role="option" aria-label="@selectOption.Value" aria-selected="@GetAriaSelected(selectOption)">@selectOption.Value</div>
                            }
                        </div>
                        <div class="" style="max-height:256px; overflow-y:auto;">
                            <div>
                                <div class="" style="display: flex; flex-direction: column;">
                                    @if (IsCreatedTagOption())
                                    {
                                        <SelectOption Value="@_searchValue" IsSearch="true">@_searchValue </SelectOption>
                                    }

                                    @ChildContent

                                    @if (Options != null && Options.Any())
                                    {
                                        foreach (var option in Options)
                                        {
                                            <SelectOption Value="@option.Key">@option.Label</SelectOption>
                                        }
                                    }

                                    @if (IsTagMode)
                                    {
                                        var tagOptions = new SortedSet<string>(_tagSelectOptions.Select(option => option.Value).Union(_tokenSelectOptions));
                                        @foreach (var tag in tagOptions)
                                        {
                                            <SelectOption Value="@tag" IsTag="true">@tag </SelectOption>
                                        }
                                    }
                                </div>
                            </div>
                        </div>

                        if (DropdownRender != null)
                        {
                            @DropdownRender(default, default);
                        }
                    }
                </div>
            </div>
        </div>
    </div>
</CascadingValue>