Cannot set property 'tabIndex' of null in select with dynamic data

[ermarkar]

I am using it with Angular6

This is the HTML

<select (change)="optionChanged($event)" #collectionRoleList>
    <option [value]="role.id" *ngFor="let role of roles"
         [attr.selected]="role.id === selectedRoleId ? 'true': null">
          {{role.name}}
     </option>
</select>

And in .ts

@ViewChild("collectionRoleList")
elCollectionRoleList: ElementRef;

iCollectionRoleList: M.FormSelect;

///

ngAfterViewInit(): void {
       this.iCollectionRoleList = new M.FormSelect(this.elCollectionRoleList.nativeElement);
}

Now there is an ajax call that returns roles

this.userService.getAllRoles().subscribe((__roles) => {
         this.roles = __roles;
                setTimeout(() => {
                    this.iCollectionRoleList = new M.FormSelect(this.elCollectionRoleList.nativeElement);
                }, 500);
});

And now this shows the error on consoles

core.js:15714 ERROR TypeError: Cannot set property 'tabIndex' of null
    at Dropdown._makeDropdownFocusable (materialize.js:2571)
    at new Dropdown (materialize.js:2299)
    at Function.init (materialize.js:1045)
    at Function.init (materialize.js:2825)
    at FormSelect._setupDropdown (materialize.js:11860)
    at new FormSelect (materialize.js:11645)
    at collection-role-list.component.ts:37
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:17280)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)

[jakerad1979]

Same here but with autocomplete

[lelabo-m]

Same issue on select component, checked the dropdown component on its own and its seems to be the issue.

[DanielRuf]

Maybe we can fix this in the actively maintained fork. Can you report these problems at https://github.com/materializecss/materialize/issues?