bug: ion-select popover items in radio group not updating

Bug Report

Ionic version:

[x] 4.4.2 (@ionic/angular)

Current behavior:

When the ion-select-options are updated, the popover radio options aren’t updated to reflect that.

Expected behavior:

I would expect the popover radio options to be updated to match the ion-select-options.

Steps to reproduce:

On this occasion I am using ion-select in a header component to present a list of languages. When a user logs in, they may not have the full array of languages available to then you the list is updated. I can see that in the HTML markup that the ion-select-options are updated but the ion-items in the popover aren’t.

Related code:

header-bar.component.html

<ion-header>
  <ion-toolbar>
    <ion-buttons>
      <ion-select *ngIf="(router.url === '/' && languagesRadioGroup.length > 1) || (router.url === '/log-in' && languagesRadioGroup.length > 1) || (global.session.activeUser.languages.length > 1)" interface="popover" placeholder="{{ 'labels.language' | translate }}" [(ngModel)]="global.currentLanguage" (ionChange)="selectLanguage($event)">
        <ion-select-option *ngFor="let language of languagesRadioGroup" value="{{language.value}}">{{language.label}}</ion-select-option>
      </ion-select>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

log-in.page.html and home.page.html

<app-header-bar [languagesRadioGroup]="global.languagesRadioGroup"></app-header-bar>

global.service.ts (imported into each page)

this.languages = [
  {
    label: 'English',
    value: 'en'
  },
  {
    label: 'Deutsche',
    value: 'de'
  },
  {
    label: 'Español',
    value: 'es'
  },
  {
    label: 'Français',
    value: 'fr'
  },
  {
    label: 'Italiano',
    value: 'it'
  },
  {
    label: 'Nederlands',
    value: 'nl'
  }
]

this._session = {
  "activeLanguage":"en",
  "activeUser":{
    "languages":["en","es"],
    "countries":["GB"],
    "defaults":{"language":"en","country":"GB"}
  },
  "activeCountry":""
}

public loadLanguages() {
    this.languagesRadioGroup = [];
    return new Promise((resolve) => {
      if (!(this._session.activeUser === undefined || this._session.activeUser.languages === undefined)) {
        for (let i = 0; i < this.languages.length; i++) {
          const language = this.languages[i];
          let defaultLanguage;
          if (this._session.activeUser.languages.includes(this._session.activeLanguage)) {
            defaultLanguage = this._session.activeLanguage;
            this.currentLanguage = this._session.activeLanguage;
          } else {
            defaultLanguage = this._session.activeUser.defaults.language;
            this.currentLanguage = this._session.activeUser.defaults.language;
          }
          if (this._session.activeUser.languages.includes(language.value)) {
            language.name = 'language' + i;
            language.type = 'radio';
            if (language.value === defaultLanguage) {
              language.checked = true;
            } else {
              language.checked = false;
            }
            this.languagesRadioGroup.push(language);
          }

          if (i === (this.languages.length - 1)) {
            resolve(this.languagesRadioGroup);
          }
        }
      } else {
        for (let i = 0; i < this.languages.length; i++) {
          const language = this.languages[i];
          language.name = 'language' + i;
          language.type = 'radio';
          this.languagesRadioGroup.push(language);

          if (i === (this.languages.length - 1)) {
            resolve(this.languagesRadioGroup);
          }
        }
      }
    });
  }

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.0.2 (C:\Users\xxxxxx\AppData\Roaming\nvm\v12.4.0\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.4.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.1.4, browser 5.0.4
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 17 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.3

System:

   Android SDK Tools : 26.1.1 (C:\Users\xxxxxx\AppData\Local\Android\Sdk)
   NodeJS            : v12.4.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10

[liamdebeasi]

@btsiders,

Your scenario looks like a bug. ion-select relies on ionSelectOptionDidUnload and ionSelectOptionDidLoad to be called from ion-select-option for the component to update. When switching to the empty array, the Unload event is not being seen by ion-select.

I believe this is similar to https://github.com/ionic-team/ionic/issues/17344. We were hoping that this issue would be fixed with the Stencil One update, but unfortunately it was not, so I’ll have to do some more digging to figure out what the solution would be.

I am going to keep this issue closed, but feel free to follow the issue I linked to for updates.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.