FluentSelect "placeholder" value that disappears on interaction

[gotmoo]

I'm trying to get a FluentSelect component on my site that has a "placeholder" value that is displayed when the user first opens the form. This particular select is a required field, but I do not want to pre-select a value.

I'd like for the user to see something like "Please select from the dropdown", but then when the user interacts with the dropdown, this placeholder is not in the list and can't be selected. This seems possible with plain html/css, as found on StackOverflow:

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

Is this something that is already possible with Blazor FluentUI, and if not is this something that would be worth adding? I could take a stab at it :)

[dvoituron]

No, that's not possible: the code we use with Fluent WebComponent looks like this.
And one restriction of fluent-select is that the selected item cannot be disabled.

You can try this code here, and you will see that the item displayed is "One".
https://jsfiddle.net/dvoituron/1zk3ghfu/4/

<fluent-select>
  <fluent-option disabled selected>select</fluent-option>
  <fluent-option>One</fluent-option>
  <fluent-option>Two</fluent-option>
</fluent-select>

And alternative is to use the FluentAutocomplete.

[gotmoo]

That makes sense that a disabled item can't be shown. Would it be legal then to use display:none as inline style with aria-hidden="true" , when it comes to accessibility?

<EditForm Model="Model" FormName="Starship3">
    <FluentSelect TOption="string" @bind-Value="@Model!.Classification">
        <FluentOption Value="" Style="display:none;" aria-hidden="true">Select an option...</FluentOption>
        <FluentOption Value="Defense">Defense</FluentOption>
        <FluentOption Value="Exploration">Exploration</FluentOption>
        <FluentOption Value="Diplomacy">Diplomacy</FluentOption>
    </FluentSelect>

    <FluentButton OnClick="@(() => Model!.Classification = "Exploration")">Set value to "Exploration"</FluentButton>
</EditForm>

This seems to work but I'd like the placeholder text to be slightly highlighted to the user that a selection needs to be made.

[gotmoo]

I may have something sort of working for both with an input list of items as well as manually adding items. Modifying ListComponentBase.razor:

 ...private void RenderOptions(RenderTreeBuilder __builder)
    {
        if (!string.IsNullOrEmpty(Placeholder))
        {
            <FluentOption TOption="TOption" Value="" Style="display:none;" aria-hidden="true">@Placeholder</FluentOption>
        }

        if (Items is null)...

The List of Options example (with OptionsSelected removed) looks like this:

<FluentSelect Items=@stringOptions1
               OptionText="@(i => i.Text)"
               OptionValue="@(i => i.Value)"
               @bind-Value="@stringValue"
               Placeholder="Make a selection..."
               />

With the manual options:

<FluentSelect TOption=string Placeholder="Click to show disabled option...">
    <FluentOption Disabled="true">This option is disabled.</FluentOption>
</FluentSelect>

I was trying to figure out how to change the styling of FluentSelect when this placeholder is visible, but so far have not had much luck with this.

Note: This change does not appear to impact Combobox, Listbox or Autocomplete.

[dvoituron]

Thanks for this work. I pushed a PR to include this feature in the Lib: #2311

[gotmoo]

Very cool! I saw you also got the proper formatting for the placeholder text. How did you get that working? I would have put in a PR for this if I'd figured that one out :)

[dvoituron]

using a style #myselect::part(selected-value) { color: var(--neutral-base-color); }

[gotmoo]

I saw that in the commit (once I remembered I could just look there). Very nicely done! When would this become available in the production version on NuGet?