Angular 11 switchmap not working after catch error

Question

I have two dropdowns in my angular app. Second one is populated based on first dropdown value. I am using switchmap. It works fine as long as there is no error. As soon there is no values to populate second dropdown and there is an error, subsequent call is not happening when i change values in first dropdown. Am i doing anything wrong here?

Here is my code:

private customListItems$ = this.auditFilterService.subjectType$     // this is first option value
  .pipe(
    takeUntil(this.destroy$),
    filter(x => x && x !== ''),
    switchMap((selectedSubjectType) => {
      const result = this.customListsService.getCustomListItemsByTypeName({
        typeName: selectedSubjectType,
        onlyActive: true
      } as CustomListItemsByLocationParams);
      return result;
    }),
    catchError(err => {
      console.log('error', err);
      return of(undefined);
    })
  );

Answer 1

Following fix suggested in the comment by munleashed solves my issue:

  private customListItems$ = this.auditFilterService.subjectType$.pipe(
    takeUntil(this.destroy$),
    filter((x) => x && x !== ''),
    switchMap((selectedSubjectType) => {
      const result = this.customListsService
        .getCustomListItemsByTypeName({
          typeName: selectedSubjectType,
          onlyActive: true,
        } as CustomListItemsByLocationParams)
        .pipe(
          catchError((err) => {
            console.log('error', err);
            return of(null);
          })
        );
      return result;
    })
  );