bug: In React, modals within the IonNav component cause input elements to become non-reactive. #28841
Description
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
If I try to render a modal within , any input element becomes non-reactive, e.g., onChange, onFocus and other events don't work.
Expected Behavior
Input elements work as expected and are reactive.
Steps to Reproduce
In the example below value will never change, onChange is not called if you type in the input.
import React, { useState } from 'react';
import { IonModal, IonNav } from '@ionic/react';
const NavLinkInnerModal = () => {
const [value, setValue] = useState('');
return (
<IonModal isOpen={true}>
<div>
<input
value={value}
onChange={(e) => {
alert('on change is called');
setValue(e.target.value);
}}
/>
<div>Value - {value}</div>
</div>
</IonModal>
);
};
function Example() {
return <IonNav root={() => <NavLinkInnerModal />}></IonNav>;
}
export default Example;
Code Reproduction URL
https://stackblitz.com/edit/q1xwny?file=src%2Fmain.tsx,src%2Findex.tsx
Ionic Info
Ionic:
Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.5.1
Capacitor:
Capacitor CLI : 5.3.0
@capacitor/android : 5.5.0
@capacitor/core : 5.5.0
@capacitor/ios : 5.5.0
Utility:
cordova-res : not installed globally
native-run (update available: 2.0.0) : 1.7.3
System:
NodeJS : v18.16.1 (/usr/local/bin/node)
npm : 9.5.1
OS : macOS Monterey
───────────────────────────────────────────────
Ionic CLI update available: 7.1.1 → 7.1.5
Run npm i -g @ionic/cli to update
Additional Information
This issue is a significant blocker for using the very helpful IonNav component.