bug: ion-select using popover interface causes bugs on hidden ion-radio components

[davideshay]

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

• v4.x
• v5.x
• v6.x
• v7.x
• Nightly

Current Behavior

In the v7 beta, in react, I have a v7 ionSelect component, using a popover interface (does not happen with the other types) I get the following error about ion-radio components (note that these are auto-generated when using a popover interface, and my code doesn't use ion-radio components at all:

[Ionic Warning]: Using ion-radio with an ion-label has been deprecated. To migrate, remove the ion-label and pass your label directly into ion-radio instead.
Example: <ion-radio>Option Label:</ion-radio>

For radios that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the radio.

For radios that do not render the label immediately next to the radio, developers may continue to use "ion-label" but must manually associate the label with the radio by using "aria-labelledby". 

Expected Behavior

No errors or warnings.

Steps to Reproduce

• Use v7 ionic react beta
• use ion-select with interface=popover
• examine console logs

Easiest way to reproduce is to use the stackblitz link from here : https://ionicframework.com/docs/v7/api/select. (the section around popover select interface types)

Code Reproduction URL

https://x2d6bwrun-dbck--3000.local-credentialless.webcontainer.io/

Ionic Info

Ionic:

Ionic CLI : 6.20.4 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.0.0-beta.5

Capacitor:

Capacitor CLI : 4.5.0
@capacitor/android : 4.5.0
@capacitor/core : 4.6.1
@capacitor/ios : not installed

Utility:

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

System:

NodeJS : v19.7.0 (/usr/local/Cellar/node/19.7.0/bin/node)
npm : 9.5.0
OS : macOS Monterey

Additional Information

No response

[sean-perkins]

@davideshay can you double check your reproduction link? It appears to be the local running web container instead of the project.

This should have been fixed in v7.0.0-beta.4 with: #26796, as it introduced the legacy flag option directly on the generated radio options in <ion-select interface="popover">.

With a reproduction I can see if the example is using the latest @ionic/core beta as well.

[davideshay]

In terms of reproduction, the easiest way to is to go to the v7 api page for the ion-select component, scroll down to the popover interface, select React, then click on the stackblitz icon. View the console log in the browser (not the stackblitz pseudo-console).

I've forked that stackblitz repo here:

https://stackblitz.com/edit/angular-yroaes?file=src/main.tsx

[sean-perkins]

@davideshay thanks! The demo examples with web containers resolve off the package-lock.json which is referencing an older version of @ionic/core.

Here is an example running beta 5: https://stackblitz.com/edit/angular-mx5rt4

The warning message will change to:

bundle.js:7971 [Ionic Warning]: ion-radio is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.

This is expected behavior. Developers should receive a warning for legacy implementations, including Ionic Framework internals that use the legacy syntax. The ion-select popover is the last remaining legacy implementation that the Framework team has outstanding to migrate to the modern syntax.

We currently have a backlog task to migrate this, but isn't a blocker for the v7 release and is currently deprioritized for other tasks required for v7.

Is there any other issues you are facing with this, outside of the warning message?

[davideshay]

The warning message was the main challenge, the functionality itself did seem to work.

[NorthFred]

@sean-perkins @davideshay
This can be reproduced with Angular as well, and is not limited to React.

Example:

<ion-select label="width" formControlName="width" interface="popover" type="number" placeholder="{{ 'PLACEHOLDER_INPUT_TIRE_WIDTH' | translate }}">
  <ion-select-option *ngFor="let option of configuration.tires.widths" [value]="option">{{option}}</ion-select-option>
</ion-select>

When interacting with the select pop-over, the following warning keeps being printed:

[Ionic Warning]: ion-radio now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.

Example: <ion-radio>Option Label</ion-radio>
Example with aria-label: <ion-radio aria-label="Option Label"></ion-radio>

Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup. 
<ion-radio class="sc-ion-select-popover-md">