Static Dropdown and static tabs

[Sautl]

hi @Anu6is @sikelio @pigwing @cagemaan ,

It would be helpful, if there is static dropdown and static tabs. I've tried on my side but i thing i'm not enough good to make it :)

please help me

thanks in advance

[SteveDunn]

+1 - that would be very useful for MudAppBar in pre-rendered scenarios. I'd be happy to have a go with a bit of guidance on where to start (not an HTML/Blazor expert)

[Su-s]

by referring the code in this repo i've created this

@namespace MudBlazor.StaticInput
@typeparam T
@inherits MudSelect<T>
@inject IJSRuntime JS

<div @ref="SelectElement" class="static-select-container" @onclick="HandleClick">
    <MudSelect T="@T"
               Value="@Value"
               ValueChanged="@ValueChanged"
               Label="@Label"
               AdornmentIcon="@AdornmentIcon"
               AdornmentColor="@AdornmentColor"
               Variant="@Variant"
               Margin="@Margin"
               Disabled="@Disabled"
               Error="@Error"
               ErrorText="@ErrorText"
               Required="@Required"
               RequiredError="@RequiredError"
               HelperText="@HelperText"
               Dense="@Dense"
               AnchorOrigin="@AnchorOrigin"
               TransformOrigin="@TransformOrigin"
               FullWidth="@FullWidth"
               id="@Id">
        @ChildContent
    </MudSelect>
</div>

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.JSInterop;
using MudBlazor;
using System;
using System.Threading.Tasks;

namespace MudBlazor.StaticInput;


public partial class StaticSelect<T> : MudSelect<T>, IAsyncDisposable
{
    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    // Element reference for JS interop
    protected ElementReference SelectElement;

    // Unique ID for this instance
    public string Id { get; } = $"static-select-{Guid.NewGuid():N}";

    // JS module reference
    private IJSObjectReference _jsModule;
    private DotNetObjectReference<StaticSelect<T>> _dotNetObjectRef;

    // Track if dropdown is open
    private bool _isOpen;

    [Parameter]
    public bool IsOpen
    {
        get => _isOpen;
        set
        {
            if (_isOpen != value)
            {
                _isOpen = value;
                IsOpenChanged.InvokeAsync(value);
                UpdateDropdownStateAsync(value);
            }
        }
    }

    [Parameter]
    public EventCallback<bool> IsOpenChanged { get; set; }

    // Custom property example
    [Parameter]
    public bool CustomProperty { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        // Set default values for the component
        if (Variant == Variant.Text) // Only set defaults if not explicitly specified
        {
            Variant = Variant.Outlined;
            AnchorOrigin = Origin.BottomCenter;
            TransformOrigin = Origin.TopCenter;
            Margin = Margin.Dense;
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            _dotNetObjectRef = DotNetObjectReference.Create(this);
            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./staticSelect.js");
            await _jsModule.InvokeVoidAsync("initializeSelect", SelectElement, Id, _dotNetObjectRef);
        }
    }

    [JSInvokable]
    public async Task SelectChanged(string selectedValue)
    {
        // Handle the value change from JS
        Console.WriteLine($"Value changed to: {selectedValue}");

        // Close the dropdown
        IsOpen = false;
        await InvokeAsync(StateHasChanged);
    }

    public async Task HandleClick(MouseEventArgs args)
    {
        if (!Disabled)
        {
            // Toggle dropdown state
            IsOpen = !IsOpen;

            // Let the JS handle opening/closing
            if (_jsModule != null)
            {
                if (IsOpen)
                {
                    await _jsModule.InvokeVoidAsync("openDropdown", Id);
                }
                else
                {
                    await _jsModule.InvokeVoidAsync("closeDropdown", Id);
                }
            }

            await InvokeAsync(StateHasChanged);
        }
    }

    private async Task UpdateDropdownStateAsync(bool isOpen)
    {
        if (_jsModule != null)
        {
            if (isOpen)
            {
                await _jsModule.InvokeVoidAsync("openDropdown", Id);
            }
            else
            {
                await _jsModule.InvokeVoidAsync("closeDropdown", Id);
            }
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_jsModule != null)
        {
            await _jsModule.InvokeVoidAsync("dispose", Id);
            await _jsModule.DisposeAsync();
        }

        _dotNetObjectRef?.Dispose();
    }
}

@namespace MudBlazor.StaticInput
@typeparam T
@inherits MudSelectItem<T>

 <MudSelectItem T="@T"
               Value="@Value"
               Disabled="@Disabled">
    @ChildContent
</MudSelectItem>

using Microsoft.AspNetCore.Components;

namespace MudBlazor.StaticInput;

public partial class StaticSelectItem<T> : MudSelectItem<T>
{
    // Custom property example
    [Parameter]
    public bool CustomItemProperty { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }
}

// This file should be placed in wwwroot/js or in your library's content folder
export function initializeSelect(element, id, dotNetHelper) {
    // Store references for cleanup
    if (!window.staticSelectRefs) {
        window.staticSelectRefs = {};
    }

    window.staticSelectRefs[id] = {
        element: element,
        dotNetHelper: dotNetHelper,
        clickHandler: handleClick,
        observer: null
    };

    // Find the MudSelect input field
    const mudInput = element.querySelector('.mud-input-control');
    if (!mudInput) return;

    // Add click event listener to the mudInput
    mudInput.addEventListener('click', handleClick);

    // Set up a mutation observer to watch for the dropdown being added to the DOM
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type === 'childList' && mutation.addedNodes.length) {
                mutation.addedNodes.forEach(node => {
                    if (node.classList && node.classList.contains('mud-popover-open')) {
                        // When a popover is added, check if it's ours and add item click handlers
                        setupSelectItemHandlers(node);
                    }
                });
            }
        });
    });

    // Start observing the document body for added nodes
    observer.observe(document.body, { childList: true, subtree: true });

    // Store the observer for cleanup
    window.staticSelectRefs[id].observer = observer;

    function handleClick(event) {
        // Find actual MudSelect input wrapper - which has the click handler in MudBlazor
        const inputControl = element.querySelector('.mud-input');
        if (!inputControl) return;

        // MudBlazor attaches the click handler to the input wrapper - simulate click on it
        simulateClick(inputControl);

        // Also try clicking the adornment (dropdown arrow) as a fallback
        const adornment = inputControl.querySelector('.mud-input-adornment');
        if (adornment) {
            simulateClick(adornment);
        }

        // If neither of those worked, try forcing the dropdown to appear
        setTimeout(() => {
            const popovers = document.querySelectorAll('.mud-popover');
            popovers.forEach(popover => {
                // Find a popover that's positioned near our select
                const inputRect = inputControl.getBoundingClientRect();
                const popoverRect = popover.getBoundingClientRect();

                // Check if this popover is positioned below our input (likely our dropdown)
                if (Math.abs(inputRect.left - popoverRect.left) < 50 &&
                    Math.abs(inputRect.bottom - popoverRect.top) < 50) {

                    // Force it to be visible by adding the open class and removing hidden class
                    popover.classList.add('mud-popover-open');
                    popover.classList.remove('mud-popover-hidden');

                    // Setup handlers for the items
                    setupSelectItemHandlers(popover);
                }
            });
        }, 50);
    }

    function setupSelectItemHandlers(popover) {
        // Find all select items in the popover
        const selectItems = popover.querySelectorAll('.mud-select-item');
        selectItems.forEach(item => {
            // Remove existing click handler if any
            item.removeEventListener('click', itemClickHandler);

            // Add click handler
            item.addEventListener('click', itemClickHandler);
        });
    }

    function itemClickHandler(event) {
        // When an item is clicked, close the dropdown
        const value = this.textContent.trim();

        // Notify .NET of the selection
        dotNetHelper.invokeMethodAsync('SelectChanged', value);

        // Find and click the select to close the dropdown
        setTimeout(() => {
            // Find the input again
            const inputControl = element.querySelector('.mud-input');
            if (inputControl) {
                simulateClick(inputControl);
            }
        }, 100);
    }

    function simulateClick(element) {
        const event = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true
        });
        element.dispatchEvent(event);
    }
}

export function dispose(id) {
    // Clean up event listeners and observers
    if (window.staticSelectRefs && window.staticSelectRefs[id]) {
        const { element, clickHandler, observer } = window.staticSelectRefs[id];

        // Remove click event listener
        const inputControl = element.querySelector('.mud-input-control');
        if (inputControl) {
            inputControl.removeEventListener('click', clickHandler);
        }

        // Disconnect the observer
        if (observer) {
            observer.disconnect();
        }

        delete window.staticSelectRefs[id];
    }
}

// Helper function to trigger a dropdown without knowing which element to click
export function triggerDropdown(id) {
    if (window.staticSelectRefs && window.staticSelectRefs[id]) {
        const { element, clickHandler } = window.staticSelectRefs[id];
        const inputControl = element.querySelector('.mud-input-control');
        if (inputControl) {
            clickHandler({ target: inputControl });
        }
    }
}

// Force open a dropdown programmatically
export function openDropdown(id) {
    triggerDropdown(id);
}

// Force close a dropdown programmatically
export function closeDropdown(id) {
    // Find any open popovers related to this select and close them
    const element = window.staticSelectRefs[id]?.element;
    if (!element) return;

    const inputControl = element.querySelector('.mud-input');
    if (!inputControl) return;

    const inputRect = inputControl.getBoundingClientRect();

    const popovers = document.querySelectorAll('.mud-popover-open');
    popovers.forEach(popover => {
        const popoverRect = popover.getBoundingClientRect();

        // Check if this popover is positioned below our input (likely our dropdown)
        if (Math.abs(inputRect.left - popoverRect.left) < 50 &&
            Math.abs(inputRect.bottom - popoverRect.top) < 50) {

            // Force it to be hidden
            popover.classList.remove('mud-popover-open');
            popover.classList.add('mud-popover-hidden');
        }
    });
}

but now also onclicking the select the items are not listing. Please help me.