Modal destroy by TextInput
See original GitHub issueDescription
The modal is destroyed when I’m trying to update a state by TextInput.
const [nombreUsuario, setNombreUsuario]=useState('');
const [password, setPassword]=useState('');
const handleUserNameChange=(event)=>{
setNombreUsuario(event.target.value);
}
const handlePasswordChange=(event)=>{
setPassword(event.target.value);
}
<Modal
header='Iniciar Sesión'
open={false}
options={{
dismissible: true,
endingTop: '10%',
inDuration: 250,
onCloseEnd: null,
onCloseStart: null,
onOpenEnd: null,
onOpenStart: null,
opacity: 0.5,
outDuration: 250,
preventScrolling: true,
startingTop: '4%'
}}
root={document.getElementById('root')}
>
<TextInput
icon="email"
id="login-useremail"
label="Usuario o Email"
value={nombreUsuario}
onChange={handleUserNameChange}
/>
<TextInput
icon="lock"
id="login-pass"
label="Password"
password
value={password}
onChange={handlePasswordChange}
/>
</Modal>
Steps to Reproduce
- Open Modal.
- Write any letter and the modal will close and can’t reopen.
Expected behavior: Can write and update the states.
Actual behavior: Modal is destroyed.
Versions
react-materialize: ^3.9.0 materialize-css: ^1.0.0 react: ^16.13.1
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
How to clear all input fields in bootstrap modal when clicking ...
This code can be used on close(data-dismiss)of modal.(to clear all fields). Here I have cleared my input fields and my div as id="errorDiv1" ......
Read more >#3 - Custom Text Input Modal - React Native Async ... - YouTube
reactnative #asyncstorage #CRUDLets create a Note Taking App using React Native and Async Storage.
Read more >Modal - Bootstrap
Modals are built with HTML, CSS, and JavaScript. · Clicking on the modal “backdrop” will automatically close the modal. · Bootstrap only supports...
Read more >modal not allow to write in input - Material Design for Bootstrap
p>Hello,</p> <p>when i modal is open modal not allow to write in input field</p> <p>You can test here <a href=https://www.paladinschallenge.com/register.php ...
Read more >Create a modal with text input - ServiceNow Community
We currently have an onSubmit client script in Incident that triggers a prompt component pop-up under certain conditions.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

Thank you both for reporting this issue,
childrenwas added as a dependency to all JS components so that if children changes the component is reinitialised, but truth is that inModalthis breaks functionality. Fixing!@MartinDanielCP, please try
3.9.2