Dropdown: Native dropdown can't be reset to empty if no empty value exists

[ArakTaiRoth]

Info

If you create a native dropdown using our components, but don't give it an empty value, you can't reset the dropdown to an empty value, it resets to the very first value provided to it. This is only for our native dropdown, our default dropdown can be reset as per normal. And a default HTML select element can also be reset to empty without needing an empty value.

Code

<goa-dropdown goaValue [formControl]="dropdownTest" [value]="dropdownTest.value" native mb="l">
  <goa-dropdown-item *ngFor="let fruit of fruits" [value]="fruit.value" [label]="fruit.label" />
</goa-dropdown>
<br />
<goa-button (_click)="onClick()">Reset</goa-button>
<br />
<select name="test" [formControl]="dropdownTest" >
  <option *ngFor="let fruit of fruits" [value]="fruit.value">{{ fruit.label }}</option>
</select>

dropdownTest = new FormControl();

public readonly fruits = [
  { value: "abc123", label: "ABC Child Care : 80001234" },
  { value: "def456", label: "Able Daycare and Preschool : 800005674" },
  { value: "ghi789", label: "Cherry" },
  { value: "jkl012", label: "Date" },
  { value: "mno345", label: "Elderberry" },
  { value: "pqr678", label: "Fig" },
  { value: "stu901", label: "Grape" },
  { value: "vwx234", label: "Honeydew" },
  { value: "yza567", label: "Kiwi" },
  { value: "bcd890", label: "Lemon" }
];

onClick() {
  this.dropdownTest.reset();
}

Notice how the first element (our native component) can't be reset to blank, whereas the html select element can be.

Acceptance Criteria:

1. Native Dropdown should be able to be reset to an empty value
2. Native Dropdown should also probably be set to show a blank value on page load, rather than the currently selected first value

[ArakTaiRoth]

Workaround: Set an empty value as an option