el-selectedcontent not updating

[sachithchowl]

What component (if applicable)

• Component name: Tailwind Plus Elements Select Menus

Describe the bug
At el-selectedcontent set content as per the value it first reloads, but if we change the value, use another select dropdown. el-selectedcontent reminds the same

Screenshots

Screen.Recording.2025-11-14.160418.mp4

Additional context
can we add input box in el-options to filter el-option

[thecrypticace]

@sachithchowl Could you provide a code snippet for your setup?

I set up a simple example locally and it appears to work as expected:

Screen.Recording.2025-11-14.at.08.47.04.mov

[sachithchowl]

<div class="sm:col-span-1">
    <span class="block text-sm font-medium leading-6 text-gray-900">Country</span>
    <div class="mt-1 grid grid-cols-1">
        <select @oninput="@(e => OnCountryChanged(e))" @bind="countryFilter" class="@DropdownStyle.InputSelectClassStyle(countryFilter)" aria-label="country">
            <option value="" class="text-gray-400">Select country...</option>
            @if (getCountriesListResponse is not null)
            {
                @foreach (var country in getCountriesListResponse.Countries)
                {
                    <option value="@country.Id">@country.Name</option>
                }
            }
            else
            {
                <option disabled>No records found</option>
            }
        </select>
        <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
            <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
        </svg>
    </div>
</div>

<div class="sm:col-span-1">
    <span class="block text-sm font-medium leading-6 text-gray-900">State</span>
    <div class="mt-1">
 <DropdownSearch1 @bind-Value="stateFilter" TItem="StateListProto"
                        Items="@getStateListResponse?.State?.ToList()"
                        DisplayTextSelector="s => s?.Name"
                        ValueSelector="s => s.Id"
                        InputPlaceholder="Select state name" />
    </div>
</div>

 private async Task OnCountryChanged(Microsoft.AspNetCore.Components.ChangeEventArgs e)
 {
     var selectedCountryId = e.Value?.ToString();
     if (!string.IsNullOrEmpty(selectedCountryId) && getCountriesListResponse != null)
     {
         // Load states for the selected country
         try
         {
             getStateListResponse = await commonServiceClient.GetStateListByCountryIdAsync(new GetStateListByCountryIdRequest { CountryId = selectedCountryId, PageIndex = 1, PageSize = int.MaxValue });
         }
         catch (ApplicationException ex)
         {
             listErrorMessage = ex.Message;
         }

         stateFilter = string.Empty;
     }
     else
     {
         stateFilter = string.Empty;
         getStateListResponse = null;
     }
 }

DropdownSearch1 page

<el-select value="@Value" @onchange="OnInputChanged" class="block">
    <button type="button">
            <el-selectedcontent class="col-start-1 row-start-1 truncate pr-6"></el-selectedcontent>
        <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4">
            <path d="M5.22 10.22a.75.75 0 0 1 1.06 0L8 11.94l1.72-1.72a.75.75 0 1 1 1.06 1.06l-2.25 2.25a.75.75 0 0 1-1.06 0l-2.25-2.25a.75.75 0 0 1 0-1.06ZM10.78 5.78a.75.75 0 0 1-1.06 0L8 4.06 6.28 5.78a.75.75 0 0 1-1.06-1.06l2.25-2.25a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
        </svg>
    </button>

    <el-options anchor="bottom start" popover>
        <el-option value="" class="group/option">
            <span class="block truncate font-normal text-gray-400 group-focus/option:text-white">@InputPlaceholder</span>
            <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-violet-600 group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden">
                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5">
                    <path d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" fill-rule="evenodd" />
                </svg>
            </span>
        </el-option>

        @if (Items != null && Items.Any())
        {
            @foreach (var item in Items)
            {
                <el-option value="@GetValue(item)" class="group/option">
                    <span class="block truncate font-normal group-aria-selected/option:font-semibold">@GetDisplayText(item)</span>
                    <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden">
                        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5">
                            <path d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                    </span>
                </el-option>
            }
        }
        else
        {
            <el-option disabled class="group/option relative block cursor-default py-2 pr-9 pl-3 text-gray-900 select-none focus:bg-indigo-600 focus:text-white focus:outline-hidden">
                <span class="block truncate font-normal group-aria-selected/option:font-semibold">No results found</span>
                <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden">
                    <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5">
                        <path d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" fill-rule="evenodd" />
                    </svg>
                </span>
            </el-option>
        }
    </el-options>
</el-select>


@code {
    [Parameter] public IEnumerable<TItem>? Items { get; set; }
    [Parameter] public EventCallback<TItem> OnItemSelected { get; set; }
    [Parameter] public Func<TItem, string>? DisplayTextSelector { get; set; }
    [Parameter] public Func<TItem, string>? ValueSelector { get; set; }

    [Parameter] public string Value { get; set; } = string.Empty;
    [Parameter] public EventCallback<string> ValueChanged { get; set; }

    [Parameter] public string InputPlaceholder { get; set; } = "Select an option...";
    

    private string GetValue(TItem item) =>
        ValueSelector?.Invoke(item) ?? string.Empty;

    private string GetDisplayText(TItem item) =>
        DisplayTextSelector?.Invoke(item) ?? string.Empty;

    private async Task OnInputChanged(ChangeEventArgs e)
    {
        Value = e?.Value?.ToString() ?? string.Empty;
        await ValueChanged.InvokeAsync(Value);
    }

    private string search = string.Empty;
}

[sachithchowl]

Is it possible to include an input box in the el-options popover to filter the options?

[thecrypticace]

Thanks for the code. What setup is that? I don't recognize the @code blocks. I assume something is possibly updating values without firing the necessary browser events (e.g. input).

Is it possible to include an input box in the el-options popover to filter the options?

See my response about this here: #1775 (comment)

[sachithchowl]

It in blazor c# and value is update by using

<el-select value="@value" @onchange="OnInputChanged" class="block">

private async Task OnInputChanged(ChangeEventArgs e)
{
Value = e?.Value?.ToString() ?? string.Empty;
await ValueChanged.InvokeAsync(Value);
}

[sachithchowl]

It does function a bit differently from what a searchable select would be — more like a combobox where you can enter in any value even if its not in a list.

What if we only want to select from the list with search?

[thecrypticace]

What if we only want to select from the list with search?

We don't have a built-in version for that right now. You'd have to build up the functionality yourself.

[thecrypticace]

It in blazor c# and value is update by using

I'll have to set up a local Blazor project to test this — thanks!

[sachithchowl]

What if we only want to select from the list with search?

We don't have a built-in version for that right now. You'd have to build up the functionality yourself.

Is there any possibility to add inputbox in the el-select popover in the upcoming version?
@thecrypticace Thank you

[sachithchowl]

It in blazor c# and value is update by using

I'll have to set up a local Blazor project to test this — thanks!
@thecrypticace can you test in react also

[thecrypticace]

… can you test in react also

The video I made above used React to test.

[thecrypticace]

Is there any possibility to add input box in the el-select popover in the upcoming version?

I think we're planning on this at some point I just don't know when.

[sachithchowl]

… can you test in react also

The video I made above used React to test.

Can you use different data for 2nd select drop-down like country and state/province (like The video I made above)