HTML selection automatically selects first entry

Question

I have the following code:

  <select #typ class="input" (change)="changeIndex(typ.value)">
        <option *ngFor="let creation of creationComponent>{{creation.name}}</option>
  </select>

If I start the application the selection has automatically selected the first option. But I don't want that. Why is this and how can I fix it?

A select has to have a selected option. If you don't explicitly set one using the `selected` attribute the first will be used. — Turnip, Aug 22 '17 at 11:56
Of course I came up with that idea on my own. But I don't really want an empty option tag there if there is another possibility. And the most strange thing is, that the selection has "" as default value if I don't have the (change)-event and the #type. — , Aug 22 '17 at 12:09
@OnLearn The selected answer doesn't work. LoL. https://i.imgur.com/eyNATKd.png — Praveen Kumar Purushothaman, Aug 23 '17 at 05:22

Icycool · Accepted Answer · 2017-08-23T06:56:56.673

5

Found a better answer here: https://stackoverflow.com/a/13492609/5039495

We can use selected, disabled and hidden on the default option, this is recognized by safari.

<select>
  <option selected disabled hidden></option>
  <option>1</option>
  <option>2</option>
</select>

Outdated

The trick is setting an empty option with display:none.

<select>
  <option style="display:none"></option>
  <option>1</option>
  <option>2</option>
</select>

Warning: As reported by other users, this solution doesn't work in Safari and iOS Safari

edited Aug 23 '17 at 06:56

answered Aug 22 '17 at 12:11

Icycool

7,099
1
25
33

2

Before you get too excited, this doesn't work in Safari or iOS Safari – Turnip Aug 22 '17 at 15:39
@PraveenKumar can you try the newer code on safari? – Icycool Aug 24 '17 at 11:04
@Icycool I don't know if it's intended (doesn't seem so from the code), but this disabled-hidden-selected option can be selected (iOS Safari) – grreeenn Apr 27 '20 at 22:11
Does work like it should on the ios 15. – SimonRabbit Feb 18 '22 at 11:55

score 0 · Answer 2 · answered Aug 22 '17 at 11:55

This is a common thing... Just add an empty <option> as the first:

<select #typ class="input" (change)="changeIndex(typ.value)">
  <option></option>
  <option *ngFor="let creation of creationComponent>{{creation.name}}</option>
</select>

You cannot have anything unselected for a <select> tag. This should fix it. Quoting from Turnip's comment: A select has to have a selected option. If you don't explicitly set one using the selected attribute the first will be used. For a better version, you can use the following code with selected attribute:

<select #typ class="input" (change)="changeIndex(typ.value)">
  <option selected="selected" value=""></option>
  <option *ngFor="let creation of creationComponent>{{creation.name}}</option>
</select>

Of course I thought about this. But I don't want that it is an option to choose "". If there is any other possibility please let me know, otherwise I have to do that but I knew that solution anyway. But thanks for the answer! And no, not the first one is selected generally. It is only, if there is the #typ and the (change)-event. Otherwise nothing is selected. — , Aug 22 '17 at 11:58

HTML selection automatically selects first entry

2 Answers2