Empty option added to top of select dropdown

[wesleyvandevoorde]

The code underneath produces a dropdown list, as expected, but on the top there is an empty option added to the HTML. the selected option also isn't used as placeholder. When I leave the ng-repeat options away it works as expected. The roles used for the ng-repeat options are dynamically requested from an API and are so loaded in a bit later. Although I thought this shouldn't be a problem when you add the watch attribute.

Code:

<div class="col s12" input-field ng-if="!readOnly">
   <select name="roles" ng-model="input.role" ng-change="addRole()" material-select watch>
         <option selected disabled>{{ 'Choose a role' | translate}}</option>
         <option ng-repeat="role in roles track by $index">{{ role.label }}</option>
   </select>
   <label for="roles" translate>Roles</label>
</div>

[webbiesdk]

The material-select directive really likes to have something selected.

So if the ng-model value does't correspond to the value of a select, it will create an empty in the top like you are seeing. This is if asynchronous loading is used or not.

So if you make sure the ng-model value matches the value of the placeholder option, then that will be selected, and the directive won't feel the need to create the empty option.

I'm marking this as a wontfix, because in order to fix it, we would have to change how material-select in materialize works.