bug: react, parameterized routes causing cloned elements to be misplaced

[ckubitza]

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
• [X] v6.x
• [ ] Nightly

Current Behavior

Using react. When going from a page to the same page (with a different parameter) an IonInput is jumping to the right while the page transition is active.

Expected Behavior

The IonInput should not jump.

Steps to Reproduce

Have an IonInput on a page with a route parameter and navigate (by routerLink) to the same page with another parameter value.

Code Reproduction URL

https://github.com/ckubitza/ionic-input-page-transition-bug

Ionic Info

Ionic:

Ionic CLI : 6.19.1 Ionic Framework : @ionic/react 6.1.6

Capacitor:

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

Utility:

cordova-res : 0.15.4 native-run : 1.6.0

System:

NodeJS : v16.14.0 npm : 8.3.1 OS : Windows 10

Additional Information

From my observations, the IonInput component accidently has two native inputs inside while the transition is happening (you can break execution on ionViewWillEnter to see it).

[liamdebeasi]

Thanks for the issue. I can reproduce this, but I still need to dig deeper to see why this is happening.

[liamdebeasi]

This appears to be the culprit: https://github.com/ionic-team/ionic-framework/blob/7b10fa6476c2c2896c6810c57b3160f8c8896faa/packages/react-router/src/ReactRouter/StackManager.tsx#L230-L234

When we transition to another instance of the same component @ionic/react-router attempts to clone the DOM nodes. This results in a duplicate input element inside of ion-input. This bug only impacts parameterized routes as far as I can tell.

[puopg]

@liamdebeasi Could you help me understand, what's the design choice for cloning the page element for transitions to the same component?

To me, it seems weird to have a page leave, and the same page with all the same elements and state of those elements also come back in.

[liamdebeasi]

Hey there,

Apologies for the delay. This issue was resolved in https://github.com/ionic-team/ionic-framework/pull/28616. The fix is available in Ionic 7.5.8, so I am going to close this.

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