bug: [vue] weird behaviour for ion-input focus within ion-modal

[mohamednagy]

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

v8.x

Current Behavior

I have created ion-modal and used the modelController to present the model (just copied the code from here,
the Modal.vue contains multiple ion-input and is triggered as

const modal = await modalController.create({
      component: Modal,
      initialBreakpoint: 0.5
    });

    modal.present();

when setting the initialBreakpoint the focus randomly moves the ion-inputs within the modal, when removing completely the initialBreakpoint it works fine.
see attached video

Screen.Recording.2024-11-12.at.22.13.57.mov

Expected Behavior

• moving between the ion-inputs should be smooth and focus should be set accordingly.

Steps to Reproduce

1. create a fresh new installation
2. copy the implementation from here
3. set initialBreakpoint to 0.5

Code Reproduction URL

https://ionicframework.com/docs/api/modal#controller-modals

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.4.0

Capacitor:

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

Utility:

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

System:

NodeJS : v22.9.0 (/opt/homebrew/Cellar/node/22.9.0/bin/node)
npm : 10.8.3
OS : macOS Unknown

Additional Information

No response