Blazor doesn't render the value attribute if it is set to an empty string

[fire-birdie]

Blazor doesn't render the value attribute of an option element if the value is an empty string. In other words, this:

<option value="">Test Option</option>

becomes:

<option>Test Option</option>

when rendered to the client. The result is that selecting the option will set the containing select element's value to the text of the option (i.e. Test Option) instead of the empty string.

The same markup, when used inside a .cshtml file, renders the value attribute to the client, allowing for an option that has an empty string as its value. I haven't found a way to do this from a .razor file short of running some Javascript code to set the attribute after the content is rendered.

To Reproduce

1. Using v3.0.0-preview8 of ASP.NET Core, create a new Blazor application
2. Add the following to the body tag of _Host.cshtml:

	<script>
		function fixOptionValue(option) {
			option.setAttribute('value', '');
		}
	</script>

3. Replace the contents of Index.razor with:

@page "/"
@inject IJSRuntime JsRuntime

<select @bind="selectedValue">
	<option selected hidden disabled>Select one</option>
	<option value="">Default behaviour</option>
	<option value="" @ref="EmptyOption" @ref:suppressField>Modified by script</option>
	<option>Option without value</option>
</select>

<div>
	Selected Value: @selectedValue
</div>

@code {
	private string selectedValue;
	private ElementReference EmptyOption;

	protected override async Task OnAfterRenderAsync(
		bool firstRender)
	{
		if (firstRender)
		{
			await this.JsRuntime.InvokeAsync<object>(
				"fixOptionValue",
				this.EmptyOption);
		}
	}
}

4. Run the app and switch between the options in the select element
5. Inspect the options in the browser's dev tools

Expected behaviour

Expected the Default behaviour option to have value=""

[pranavkm]

Thanks for your issue report. We'll track fixing this as part of our next milestone.

[Matthewsre]

I have had to set the value to a specific value I chose to represent an empty string and translate it in the setter of the binded property.

Are there any better alternative approaches to get this to show up/work with an empty string or null?

[mikelyncheski]

For now, I created a simple method that creates the markup for the option:

`{return $"<option value='{firstItem.Value}'>{HttpUtility.HtmlEncode(firstItem.Label)}</option>";`

I have a wrapper around each of our Input components so I only had to put this in one place.:

https://gist.github.com/mikelyncheski/7543d2d1f37aa1c27b735077a2efdc41

[chrisdpratt]

A less complicated workaround:

@((MarkupString)"<option value=\"\">Select Something</option>")

No need for a whole component wrapper just to handle this.