Feature Request: MudChipField with Inline Chips

[Welchen]

MudChipField with chips that are inline to allow for a chip search look of control. We have taken a stab at it and included some code to be considered for the main component. Not sure how best to toggle between the current style and this new style. Would think it would be a breaking change to take away the current implementation.

Component displays chips in line with the text field. If one or many chips are present a clear button shows to allow you to clear the chips.

<MudChipField T="string" Class="mud-chip-search" Values="@Values"
             Placeholder="@Localizer["Search"]" Variant="Variant.Outlined"
              ChipSize="Size.Medium" WrapChips="true"
              Delimiter="@Delimiter" ChipColor="Color.Default" ChipVariant="Variant.Text" Closeable="true">

@if (Values.Count > 0)
{
    <div class="clear-chip">
        <MudTooltip Text="ClearAll">
            <MudIconButton Icon="@Icons.Material.Outlined.Clear" OnClick="ClearChipAsync"></MudIconButton>
        </MudTooltip>
    </div>
}

Css for mud-chip-search and clear-chip

::deep .mud-toolbar {
    height: auto !important;
    margin-bottom: 10px !important;
}

::deep .mud-chip-search.mud-input-input-control {
    width: auto !important;
    margin-left: 10px !important;
}

::deep .mud-chip-search .d-flex.mud-chipset {
    max-width: 100% !important;
    flex-wrap: wrap !important;
}

::deep .mud-chip-search .mud-input-root.mud-input-root-text.mud-input-slot {   
    max-width: 50% !important;
}

::deep .mud-chip-search input.mud-input-root.mud-input-root-text.mud-input-slot {

    padding-left: 100px;
}

::deep .mud-chip-search .mud-chip {
    height: auto !important;
    padding: 5px !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
}

::deep .mud-chip-search .mud-input-root.mud-input-root-outlined.mud-input-slot {
    width: auto !important;
    padding: 5px !important;
}

::deep .mud-chip-search input.mud-input-root.mud-input-root-outlined.mud-input-slot {
    height: 34px !important;
    width: 100% !important;
    min-width: 200px !important;
    max-width: 90% !important;
}

::deep .mud-chip-search .mud-chip-content {
    display: block !important;
}

::deep .clear-chip{
    display: flex !important;
    position: relative !important;
    left: -50px !important;
    align-self: end !important;
}

[mckaragoz]

That is must-have feature for MudChipField. But i can't achieve when copied your code. Could you provide a full example that is working directly?

[tdhintz]

` @page "/chipsearchfield"

@if (Values.Count > 0) {

}

`

` using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web;

namespace Playground.Pages.Main { public partial class ChipSearchField { ///

///List Values of the chip control. ///

public List Values { get; set; } = [];

    /// <summary>
    ///Input string for search filtering.
    /// </summary>
    public string SearchText { get; set; } = string.Empty;

    /// <summary>
    /// Callback for the Search ValueChanged event.
    /// </summary>
    [Parameter]
    public EventCallback<string> SearchValueChanged { get; set; }

    /// <summary>
    /// Callback for the chip list ValuesChanged event.
    /// </summary>
    [Parameter]
    public EventCallback<List<string>> ChipValuesChanged { get; set; }

    /// <summary>
    /// Should the text field be set to focus on render?
    /// </summary>
    [Parameter]
    public bool AutoFocus { get; set; } = false;

    /// <summary>
    /// Delimiter with a default value of space
    /// </summary>       
    public char Delimiter = ' ';

    /// <summary>
    /// Event when the clear button is clicked.
    /// </summary>
    private EventCallback<MouseEventArgs> ClearChipValues { get; set; }

    /// <summary>
    /// Event when the chip list changes.
    /// </summary>
    /// <param name="values">list value from the chipset.</param>
    /// <return>Task</return>
    private async Task ChipValuesChangedAsync(List<string> values)
    {
        Values = https://url.us.m.mimecastprotect.com/s/tXvYC4x4ywFY8OYOtxWwcu?domain=values.select(v => v.Trim()).Where(v => !string.IsNullOrWhiteSpace(v)).Distinct().ToList();

        await ChipValuesChanged.InvokeAsync(Values);
    }

    /// <summary>
    /// Clear chip values
    /// </summary>  
    /// <return>Task</return>
    private async Task ClearChipAsync()
    {
        SearchText = string.Empty;
        Values.Clear();

        await ChipValuesChanged.InvokeAsync(Values);
        await SearchValueChanged.InvokeAsync(SearchText);
        await ClearChipValues.InvokeAsync();

    }

    /// <summary>
    /// Search input value changed.
    /// </summary>  
    /// <param name="value">Search Text Value.</param>
    /// <return>Task</return>
    private async Task SearchValueChangeAsync(string value)
    {
        SearchText = value;

        await SearchValueChanged.InvokeAsync(SearchText);
    }
}

} `

`

MTIChipSearchField {

position: relative !important

}

::deep .mud-chip-search.mud-input-input-control { width: auto !important; margin-left: 10px !important; }

::deep .mud-chip-search .d-flex.mud-chipset { max-width: 100% !important; flex-wrap: wrap !important; }

::deep .mud-chip-search .mud-input-root.mud-input-root-text.mud-input-slot { max-width: 50% !important; }

::deep .mud-chip-search input.mud-input-root.mud-input-root-text.mud-input-slot { padding-left: 100px; }

::deep .mud-chip-search .mud-chip { height: auto !important; padding: 5px !important; word-wrap: break-word !important; word-break: break-word !important; white-space: normal !important; }

::deep .mud-chip-search .mud-input-root.mud-input-root-outlined.mud-input-slot { width: auto !important; padding: 5px !important; }

::deep .mud-chip-search input.mud-input-root.mud-input-root-outlined.mud-input-slot { height: 34px !important; width: 100% !important; min-width: 300px !important; max-width: none !important; margin-right: 30px !important; }

::deep .mud-chip-search .mud-chip-content { display: block !important; }

::deep .clear-chip { right: 0 !important; bottom: 0 !important; position: absolute !important; } `

[tdhintz]

Did the new sample work better for you?