Kendo Angular dropdowns are not programmatically selecting a default value every time

Question

I have a page with multiple (7) api calls that supply data for 6 kendo dropdown lists and details for remainder of the page. these all work fine. my problem is that these 6 dropdown lists will be populated and then apply a selected value based on the 7th api. I will provide the bare minimum code - 1 dropdown and the detail api calls.

The dropdown values and the details are being populated. That is not the issue. The issue is that sometimes the drop down will be preselected based on a value from the event details. Sometimes it won't.

I just don't know what I'm looking at at this point. It's got to the point that I need a second set of eyes to point out my stupidity lol.

<kendo-dropdownlist
                [defaultItem]="defaultCauseListDropDown"
                [data]="causeListDropDown$.value"
                [value]="selectedCauseList"
                [textField]="'panename'"
                [valueField]="'panename'"
                (valueChange)="handleCauseChange($event)"
              >
              </kendo-dropdownlist>

export class EventsDetailsComponent implements OnInit, OnDestroy {
  eventDetailsItems$ = new BehaviorSubject<EventDetails>(new EventDetails());
  causeListDropDown: CauseList[] = [];
  defaultCauseListDropDown: CauseList = {
    panename: 'Select',
    id: 'Select',
  };
  selectedCauseList: CauseList = this.defaultCauseListDropDown;

constructor(){}

  ngOnInit(): void {
    this.prePopulateDropdowns();

    this.getEventDetails(this.SelectedIds[0]);
}

  prePopulateDropdowns() {
    this.getCauseList();
  }

getCauseList() {
    let endpoint = `GetCauseList(Sourcesystem='${this.SourceSystemId}')`;
    this._completeService
      .getCauseListData(endpoint)
      .pipe(
        map((response: CauseList[]) => {
          return response;
        }),
        tap(() => this._completeService.causeListLoading$.next(false)),
        catchError(this._completeService.handleError)
      )
      .subscribe((response: CauseList[]) => {
        this.causeListDropDown = response;
      });
  }

getEventDetails(eventIdx: string) {
    this.isCancelDisabled$.next(true);
    this.isSaveDisabled$.next(true);
    this.showSaveSpinner$.next(true);

    this._eventDetailsService
      .getEventDetailsData(
        `GetEventDetails(Sourcesystem='${this.SourceSystemId}',EventIdx=${eventIdx})`
      )
      .pipe(
        map((response: EventDetails[]) => {
          return response[0];
        }),
        finalize(() => this.setCauseListSelectionDropDown()),
        tap(() => this._eventDetailsService.eventDetailsLoading$.next(false)),
        takeUntil(this.destroyed$),
        catchError(this._eventDetailsService.handleError)
      )
      .subscribe((result: EventDetails) => {
        this.eventDetailsItems$.next(result);

        this.setCauseListSelectionDropDown();
      });
  }


 setCauseListSelectionDropDown() {
    console.log('this.newCompleteCause.compcause: ', this.workingCompleteCause.compcause);
    // determine if there is a cause  and if so, set the cause dropdown
    if (
      this.workingCompleteCause.compcause !== null ||
      this.workingCompleteCause.compcause !== ''
    ) {
      this.selectedCauseList = this.causeListDropDown
        .filter((opt) => opt.panename === this.eventDetailsItems$.value.compcause)
        .map((x) => ({
          id: x.id,
          panename: x.panename,
        }))[0];
    } else {
      this.selectedCauseList = this.causeListDropDown
        .filter((opt) => opt.panename === 'Select')
        .map((x) => ({
          id: x.id,
          panename: x.panename,
        }))[0];
    }

    this.changeDetectorRef.detectChanges();
  }