GovAlta / ui-components

ui-components contains the code you need to start building a user interface for Government of Alberta platforms and services.
Apache License 2.0
15 stars 25 forks source link

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

Open ArakTaiRoth opened 2 months ago

ArakTaiRoth commented 2 months ago

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 commented 2 months ago

Workaround: Set an empty value as an option