bug: `ion-select` label binding warning appears even with proper `[label]` property set

[enrij]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Despite having properly set a [label] value on the ion-select, the warning in console does not disappear. Providing a text for aria-label (not [ariaLabel]) makes the warning desappear

Expected Behavior

Providing a value for either [label] oer [ariaLabel] should get rid of the warning

Steps to Reproduce

Use the following code in any component:

<ion-select [label]="'My awesome label'" [ariaLabel]="'My awesome label'">
    <ion-select-option>My awesome option 1</ion-select-option>
    <ion-select-option>My awesome option 2</ion-select-option>
</ion-select>

and observe the console warning despite providing both [label] and [ariaLabel] properties

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.0.0 (C:\Users\EnricoBarbieri\AppData\Roaming\nvm\v18.14.2\node_modules@ionic\cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 15.2.4
@angular-devkit/schematics : 15.2.4
@angular/cli : 15.2.4
@ionic/angular-toolkit : 8.1.0

Capacitor:

Capacitor CLI : 4.7.0
@capacitor/android : not installed
@capacitor/core : 4.7.0
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.7.2

System:

NodeJS : v18.14.2 (C:\Program Files\nodejs\node.exe)
npm : 9.6.2
OS : Windows 10 (⬅️ not true: it's Windows 11)

Additional Information

No response

[enrij]

Workaround: setting an empty aria-label attribute makes the warning disappear (not sure which one between aria-label and [ariaLabel] will prevail though)

[sean-perkins]

@enrij can you provide a reproduction using ionic start?

In a new blank project with the snippet provided:

<ion-select [label]="'My awesome label'">
  <ion-select-option>My awesome option 1</ion-select-option>
  <ion-select-option>My awesome option 2</ion-select-option>
</ion-select>

I am not seeing the warning in the console. Is the ion-select being rendered under any other conditions (in a modal, popover, etc.)?

[StefanNedelchev]

@enrij can you provide a reproduction using ionic start?

In a new blank project with the snippet provided:

<ion-select [label]="'My awesome label'">
  <ion-select-option>My awesome option 1</ion-select-option>
  <ion-select-option>My awesome option 2</ion-select-option>
</ion-select>

I am not seeing the warning in the console. Is the ion-select being rendered under any other conditions (in a modal, popover, etc.)?

Did you also put it inside <ion-item> element? Maybe that's when the warning is logged?

[enrij]

Creating a brand new blank app with the suspicious ion-select code and it does not trigger the warning.

I have compared my project to the new one and I noticed some differences:

• The @ionic/angular-toolkit package was at version 8.0.0. I upgraded to 9.0.0 but the warning is still there
• The rxjs package was at version ^7.8.0 but downgrading to ~7.5.0 didn't fix the issue either

I also tried ng update, npm update and npm ci to update all packages to the latest version available and clean the node_modules folder but the warning is still there.

Also starting project with ng serve instead of ionic serve is ineffective.

For reference, this is the result of ionic info on the new project

Ionic:

   Ionic CLI                     : 7.0.0 (C:\Users\EnricoBarbieri\AppData\Roaming\nvm\v18.14.2\node_modules\@ionic\cli)
   Ionic Framework               : not installed
   @angular-devkit/build-angular : 15.2.4
   @angular-devkit/schematics    : 15.2.4
   @angular/cli                  : 15.2.4
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 4.7.1
   @capacitor/android : not installed
   @capacitor/core    : 4.7.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.2

System:

   NodeJS : v18.14.2 (C:\Program Files\nodejs\node.exe)
   npm    : 9.6.2
   OS     : Windows 10

and it's the same output on my project after upgrading @ionic/angular-toolkit.

I also noticed some workings when running ionic info on both projects

[WARN] Error loading @ionic/angular package.json: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package' is
       not defined by "exports" in
       C:\Dev\essence-booking\sources\EssenceBooking.Api\EssenceBooking.IonicApp\node_modules\@ionic\angular\package.json
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'
       
       Require stack:
       - C:\Users\EnricoBarbieri\AppData\Roaming\nvm\v18.14.2\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\EnricoBarbieri\AppData\Roaming\nvm\v18.14.2\node_modules\@ionic\cli\lib\index.js
       - C:\Users\EnricoBarbieri\AppData\Roaming\nvm\v18.14.2\node_modules\@ionic\cli\index.js
       - C:\Users\EnricoBarbieri\AppData\Roaming\nvm\v18.14.2\node_modules\@ionic\cli\bin\ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'
       
       Require stack:
       - C:\Users\EnricoBarbieri\AppData\Roaming\nvm\v18.14.2\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\EnricoBarbieri\AppData\Roaming\nvm\v18.14.2\node_modules\@ionic\cli\lib\index.js
       - C:\Users\EnricoBarbieri\AppData\Roaming\nvm\v18.14.2\node_modules\@ionic\cli\index.js
       - C:\Users\EnricoBarbieri\AppData\Roaming\nvm\v18.14.2\node_modules\@ionic\cli\bin\ionic

but I assume these warnings aren't relevant to this issue since they appear in both projects.

Since I'm using ngx-translate and ngrx store in the application I also assumed, at a certain point, the warning was triggered because, while rendering the page, there was a moment in which the [label] property didn't have a value but the same warning appears also providing a static string value.

I also noticed that providing the same static label as a input

<ion-select [label]="'My awesome label'">
  <ion-select-option>My awesome option 1</ion-select-option>
  <ion-select-option>My awesome option 2</ion-select-option>
</ion-select>

triggers the warning but the same value provided as an attribute does not

<ion-select label="My awesome label">
  <ion-select-option>My awesome option 1</ion-select-option>
  <ion-select-option>My awesome option 2</ion-select-option>
</ion-select>

edit: @StefanNedelchev : sorry, I didn't respond to your question. The ion-select was included in a ion-item (along with it's own ion-label) but I got rid of them following the new guidelines (and the insane amount of warnings in my console 😆 )

[sean-perkins]

I've tested with both having the select rendering inside of an item, as well as using ngx-translate without receiving a warning in the console:

<ion-list>
  <ion-item>
    <ion-select [label]="'HELLO' | translate">
      <ion-select-option>My awesome option 1</ion-select-option>
      <ion-select-option>My awesome option 2</ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>

It is possible there is some extra condition that hasn't been detailed yet, that is contributing towards the problem.

I'm going to label this issue as needing a reproduction. Without it I am unable to diagnose the issue.

The warning with ionic info has been addressed here: ionic-team/ionic-cli#4991 (we will push out a patch release for the CLI next week most likely).

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[enrij]

Hi,
I tried to reproduce the issue starting from a ne blank ionic app but the only successful intentionally made warning i had was passing undefined intentionally as [label]

<ion-select [label]="undefined">
  ...
</ion-select>

I tried to explore both in the blank app and in my app if the | translate may lead to have, at some point in time, undefined as value but I was unsuccessful so far.

Now I have to move over, project deadlines are calling

[drewjosh]

The warning also doesn't diseappear if you use "aria-labeledby" property. Although W3C states that "aria-label" should not be used if a description is already visible.

Should I open another issue for this one?