bug: ion-select is not rendered unless it has a label or exists in a block parent container

[lincolnthree]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [ ] v6.x
• [X] v7.x
• [ ] Nightly

Current Behavior

ion-segment does not render itself properly unless it is contained within a parent element like a div (or ion-item). I haven't tested all scenarios where it can be reproduced, but it appears to happen simply by placing the component within ion-content.

There should be five select components rendered here, but we only see three.

Expected Behavior

Select components should render correctly no matter where they are placed. It seems the external components are impacting how these get rendered in a way that seems like a bug.

Steps to Reproduce

Run this in an ionic starter:

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

  <div>
    <ion-select slot="end" placeholder="1" [value]="'1'">
      <ion-select-option value="abc">1</ion-select-option>
    </ion-select>
    <ion-select slot="end" placeholder="2" [value]="'2'" aria-label="2">
      <ion-select-option value="2">2</ion-select-option>
    </ion-select>
  </div>

  <ion-select slot="end" placeholder="3" [value]="'3'" aria-label="3">
    <ion-select-option value="def">3</ion-select-option>
  </ion-select>
  <ion-select slot="end" placeholder="4" [value]="'4'">
    <ion-select-option value="asdf">4</ion-select-option>
  </ion-select>

  <ion-select placeholder="5" [value]="'5'" label="5">
    <ion-select-option value="5">5</ion-select-option>
  </ion-select>

</ion-content>

Code Reproduction URL

https://github.com/lincolnthree/ionic-bug-ion-segment/pull/new/select-components-not-rendered

Ionic Info

Ionic:

Ionic CLI : 6.20.3 (/Users/lincoln/.nvm/versions/node/v16.14.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.0.0-dev.11676644846.156e8507 @angular-devkit/build-angular : 15.1.6 @angular-devkit/schematics : 15.1.6 @angular/cli : 15.1.6 @ionic/angular-toolkit : 6.1.0

Capacitor:

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

Utility:

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

System:

NodeJS : v16.14.0 (/Users/lincoln/.nvm/versions/node/v16.14.0/bin/node) npm : 8.3.1 OS : macOS Monterey

Additional Information

No response

[lincolnthree]

Additionally, if you provide an aria-label on an ion-select, the aria-label attribute will be removed from the DOM entirely:

  <ion-select slot="end" placeholder="3" [value]="'3'" aria-label="3">
    <ion-select-option value="def">3</ion-select-option>
  </ion-select>

[liamdebeasi]

Thanks for the report. I can reproduce the reported behavior, but this does not appear to be a bug in Ionic. Your reproduction adds slot="end" to ion-select, but there is no slot="end" inside of ion-content. My guess is these elements were originally in ion-item which has a slot="end". Removing slot="end" fixes the issue.

Additionally, if you provide an aria-label on an ion-select, the aria-label attribute will be removed from the DOM entirely:

That is not what is happening. Providing the aria-label on the host inherits it to the native button element in the Shadow DOM. In your screenshot notice there is a <button> element with aria-label="3, 3". This is done because the <button> element is the actual interactive, not the host component.

[lincolnthree]

Gah, I'm blind. I'm so sorry. You are correct. This is what I get for reusing example code :( :( Thanks for guiding my old eyes to the right place.

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