Connected.Components/Components/Autocomplete/Autocomplete.razor

@namespace Connected.Components
@inherits InputBase<T>
@typeparam T

<CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
    <div class="@AutocompleteClassList">
        <InputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@ClassList()" Style="@Style"
                         Error="@HasError" ErrorText="@ErrorText" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
            <InputContent>
                <Input @ref="_elementReference" @key="_elementKey" InputType="InputType.Text"
                          Class="select-input" Margin="@Margin"
                          Variant="@Variant"
                          TextUpdateSuppression="@TextUpdateSuppression"
                          Value="@Text" DisableUnderLine="@DisableUnderLine"
                          Disabled="@Disabled" ReadOnly="@ReadOnly" Error="@HasError"
                          OnAdornmentClick="@OnAdornmentClick" AdornmentIcon="@CurrentIcon" Adornment="@Adornment" AdornmentColor="@AdornmentColor" IconSize="@IconSize" AdornmentText="@AdornmentText"
                          Clearable="@Clearable" OnClearButtonClick="@OnClearButtonClick"
                          @attributes="UserAttributes"
                          TextChanged="OnTextChanged" OnBlur="OnInputBlurred"
                          OnKeyDown="@this.OnInputKeyDown"
                          OnKeyUp="@this.OnInputKeyUp" autocomplete=@("disabled-"+Guid.NewGuid()) KeyUpPreventDefault="KeyUpPreventDefault"
                          Placeholder="@Placeholder" Immediate="true"
                          InputMode="@InputMode" Pattern="@Pattern"
                          T="string" />

                @if (ShowProgressIndicator && IsLoading)
                {
                    @if (ProgressIndicatorTemplate is not null)
                    {
                        @ProgressIndicatorTemplate
                    }
                    else
                    {
                        <div class="@CircularProgressClassList">
                            <ProgressCircular Color="ProgressIndicatorColor" Indeterminate="true" Size="Size.Small"/>
                        </div>
                    }
                }

                <Popover Open="@IsOpen" MaxHeight="@MaxHeight" AnchorOrigin="@AnchorOrigin" TransformOrigin="@TransformOrigin" Class="@PopoverClass" RelativeWidth="true">
                    @if(ProgressIndicatorInPopoverTemplate != null && IsLoading)
                    {
                        @ProgressIndicatorInPopoverTemplate
                    } 
                    else if (_items != null && _items.Length != 0)
                    {
                        <List Clickable="true" Dense="@Dense">
                            @for (var index = 0; index < _items.Length; index++)
                            {
                                var item = _items[index];
                                bool is_selected = index == _selectedListItemIndex;
                                bool is_disabled = !_enabledItemIndices.Contains(index);
                                <ListItem @key="@item" id="@GetListItemId(index)" Disabled="@(is_disabled)" OnClick="@(async() => await ListItemOnClick(item))" OnClickHandlerPreventDefault="true" Class="@(is_selected ? "selected-item primary-text primary-hover" : "")">
                                    @if (ItemTemplate == null)
                                    {
                                        @GetItemString(item)
                                    }
                                    else if (is_disabled && ItemDisabledTemplate is not null)
                                    {
                                        @ItemDisabledTemplate(item)
                                    }
                                    else if (is_selected)
                                    {
                                        @if (ItemSelectedTemplate is null)
                                            @ItemTemplate(item)
                                        else
                                            @ItemSelectedTemplate(item)

                                    }
                                    else
                                    {
                                        @ItemTemplate(item)
                                    }
                                </ListItem>
                            }
                            @if (MoreItemsTemplate is not null && _itemsReturned > MaxItems)
                            {
                                <div class="pa-1">
                                    @MoreItemsTemplate
                                </div>
                            }
                        </List>
                    }
                    else if (NoItemsTemplate is not null)
                    {
                        <div class="pa-1">
                            @NoItemsTemplate
                        </div>
                    }
                </Popover>
            </InputContent>
        </InputControl>
    </div>
</CascadingValue>

<Overlay Visible="IsOpen" OnClick="@ToggleMenu" @ontouchstart="@ToggleMenu" LockScroll="false" />