bug: IonItem's ionic component children inside a div doesn't work well

[XueMeijing]

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

Current Behavior

The IonItem slot can't resolve my needs, meanwhile it seems that i cant change item-inner display flex to block, so i have to add a div in IonItem and append ionic component in this div. But if i do that, i cant click IonCheck button.

QQ20220330-172955-HD.mp4

Expected Behavior

i want to click the IonCheckBox

Steps to Reproduce

<IonPage>
      <IonContent>
        <IonItem>
          <div>
            <IonCheckbox />
            <IonSelect value={'AAA'} style={{width: 190}}>
              <IonSelectOption>AAA</IonSelectOption>
              <IonSelectOption>BBB</IonSelectOption>
              <IonSelectOption>CCC</IonSelectOption>
            </IonSelect>
          </div>
        </IonItem>
      </IonContent>
    </IonPage>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1

Utility:

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

System:

NodeJS : v10.24.1
npm : 6.14.12
OS : macOS Big Sur

─────────────────────────────────────────────────

 Ionic CLI update available: 6.18.1 → 6.19.0
      Run npm i -g @ionic/cli to update

─────────────────────────────────────────────────

Additional Information

No response

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

[XueMeijing]

You can clone git@github.com:XueMeijing/ionic-test.git and npm start to recurrent this issue

[liamdebeasi]

Thanks. Wrapping content inside of IonItem with div is not something we currently support. Can you clarify why you need to wrap these components in div here?

[XueMeijing]

Thanks. Wrapping content inside of IonItem with div is not something we currently support. Can you clarify why you need to wrap these components in div here?

Because of the UI design😭 it seems that i cant change .item-inner display flex to block or grid, so i have to wrap these components in div and set this div to block.

[liamdebeasi]

Thanks for the additional information. You should not need to modify the internal of ion-item to display items on multiple lines. There are a few ways to do this, but the easiest is probably to do something like this:

<ion-item>
  <ion-label>
    <p>First Line</p>
    <p>Second Line</p>
  </ion-label>
</ion-item>

Can you give that a try and let me know if it fixes the issue?