Dropdown action after selected item

[rosunad]

Hi everyone,

There must be something I'm completely ignoring. I can't get a change event to be triggered when I select an item from the dropdown. what am I doing wrong?

    <Dropdown>
        <DropdownToggleButton>Seleccione temporada</DropdownToggleButton>
        <DropdownMenu>
            @foreach (Models.Season season in seasons)
            {
                <DropdownItem Type="DropdownItemType.Button">@season.Name</DropdownItem>
            }
        </DropdownMenu>
    </Dropdown>

[ToolMaker]

Same here, I also tested the @OnClick event on the button (ie DropDownItem) and the events are not firing. I see there were changes to the drop-down in release 3. Was this broken?

I have lost confidence in my reasoning abilities on this one. Maybe we are doing something wrong?

[ToolMaker]

@rosunad it seems that "Dropdown" in Bootstrap terms is not a dropdown select as we would have expected it to be. A Bootstrap dropdown is a button or link that, when clicked, reveals a list of links or actions. This is not the same as a form element (<select>). It's mainly used for navigation or action menus.

So you would need to go to bare Bootstrap CSS, something like this:

@page "/example"

<h3>My Blazor Component</h3>

<select class="form-select" @onchange="HandleSelectChange">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

@code {
    private void HandleSelectChange(ChangeEventArgs e)
    {
        var value = e.Value.ToString();
        Console.WriteLine($"Selected value: {value}");
    }
}

I just use the default blazor 'InputSelect' control and set the class styling to 'form-select'

<InputSelect class="form-select" @onchange="HandleSelectChange">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</InputSelect >

[rosunad]

@ToolMaker Yes, I finally understood that it is not the same as a select. Anyway, and as an example, since it's for a particular mini project, I ended up using it this way just to try it out.

<Dropdown Color="@ColorDropDown" @ref="DropDownSeason">
    <DropdownToggleButton>@Tip</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem Type="DropdownItemType.Button" @onclick="() => SelectSeason(TipInitial, 0)">@TipInitial</DropdownItem>
        @foreach(Models.Season season in seasons)
        {
            <DropdownItem Type="DropdownItemType.Button" @onclick="() => SelectSeason(season.Name, season.Id)">@season.Name</DropdownItem>    
        }
    </DropdownMenu>
</Dropdown>