bug: ion-input does not render labels in some specific circumstances

[whydoievenneedthis]

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

Let's take a page which has a form on it. This form has input fields, and the input fields have the new version of the labels (<ion-input label="thingy">) on it. The labels are not static texts, but dynamic ones that Angular needs to evaluate on the fly. The user navigates to this page from a different page in the application. Before displaying the form, the page makes a remote call, slightly delaying the displaying of the form. When the form is finally displayed, the labels are not visible:

When this happens, the browser dumps the warnings about the need to provide a label to the ion-input. At the same time, the ng-reflect-label attribute does contain the correct label text:

If the user navigates away from this page and then goes back, the backend call is not made a second time (it is cached in memory), and all the form labels are displayed correctly:

Interestingly the form is also displayed if the user refreshes the browsers, I have no idea why.

The issue does not happen if:

• the label is static (see the first one in the example)
• there is no remote call before displaying the form
• or the page containing the form has been newly loaded

I have seen the ion-textarea behaving the same way, but while I was preparing the reproduction for this issue, it became stable, so I cannot showcase that one.

Expected Behavior

The labels for the input fields (and all others as well) are always rendered correctly.

Steps to Reproduce

1. check out the code from below
2. pnpm install
3. pnpm nx serve my-app
4. localhost:4200
5. you are now on the /login path, page name xxx
6. click on menu entry yyy
7. notice that two of the three input fields do not have labels
8. click on menu entry xxx
9. click again on menu entry yyy
10. notice that all three of the input fields now have the labels
11. reload the page
12. notice that once again all three of the input fields have the labels

Code Reproduction URL

https://github.com/whydoievenneedthis/ionic-missing-labels

In this repository the backend call attempts to access a REST API of the Hungarian post, which fails due to CORS policy restrictions. Whether this call fails or succeeds has no impact on the behaviour.
The endpoint can be changed in this file:
https://github.com/whydoievenneedthis/ionic-missing-labels/blob/main/libs/openapi-admin/src/lib/api/adminController.service.ts#L56

Ionic Info

"@ionic/angular": "7.0.1",
"@ionic/core": "7.0.1",

"@angular-devkit/build-angular": "15.2.5",
"@angular-devkit/core": "15.2.5",
"@angular-devkit/schematics": "15.2.5",
"@angular/cli": "15.2.5",

"@capacitor/core": "4.7.3",
"@capacitor/android": "4.7.3",
"@capacitor/cli": "4.7.3",
"@capacitor/ios": "4.7.3",

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #27085.

[ionitron-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.