question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal destroy by TextInput

See original GitHub issue

Description

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

  1. Open Modal.
  2. 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:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
alextrasterocommented, May 18, 2020

Thank you both for reporting this issue, children was added as a dependency to all JS components so that if children changes the component is reinitialised, but truth is that in Modal this breaks functionality. Fixing!

1reaction
alextrasterocommented, May 20, 2020

@MartinDanielCP, please try 3.9.2

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found