Topic: Endless loop Modal cause of Chrome autocomplete
                  
                  drimaco
                  free
                  asked 4 years ago
                
Expected behavior Open Modal and autocomplete Username and Password Input.
Actual behavior Open and close Modal in endless loop. Remove stored Username and Password for Website in Chrome fixes the issue but this isnt a solution. Remove getOpenState in MDBModal fixed the issue too but brakes the possibility to click outside the modal to close.
Resources (screenshots, code snippets etc.)
      <MDBModal
    show={isLoginRegisterOpen}
    tabIndex="-1"
    backdrop={false}
    getOpenState={(e) => setIsLoginRegisterOpen(e)}
  >
    <MDBModalDialog centered>
      <MDBModalContent className="bg-secondary-bright">
        <MDBModalHeader className="border-secondary-bright">
          {/* <MDBModalTitle className="">Modal title</MDBModalTitle> */}
          <MDBBtn
            className="btn-close"
            color="none"
            onClick={() => setIsLoginRegisterOpen(!setIsLoginRegisterOpen)}
          ></MDBBtn>
        </MDBModalHeader>
        <MDBModalBody className="pt-1 p-5">
          <h3>Anmelden</h3>
          <MDBInput
            className="mt-4"
            label="E-Mail"
            id="typeEmail"
            type="email"
            size="lg"
            value={email}
            labelClass="text-white"
            onChange={(e) => setEmail(e.target.value)}
          />
          <MDBInput
            className="mt-4"
            label="Passwort"
            id="typePassword"
            type="password"
            size="lg"
            labelClass="text-white"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </MDBModalBody>
      </MDBModalContent>
    </MDBModalDialog>
  </MDBModal>
                
                  
                      
                      Wojciech Staniszewski
                      staff
                        answered 4 years ago
                    
Try to change getOpenState={(e) => setIsLoginRegisterOpen(e)} to getOpenState={setIsLoginRegisterOpen}. In the next release we will change getOpenState prop to setShow and update our docs.
                      
                      Wojciech Staniszewski
                      staff
                        answered 4 years ago
                    
Firstly, you are not using MDBAutocomplete correctly. This component is not the best choice for storing user passwords. Please check the documentation here: 
https://mdbootstrap.com/docs/b5/react/forms/autocomplete/
Your example works correctly when I change MDBAutcomplete to MDBInput. I did not notice any loop, even after saving credentials. 
drimaco free commented 4 years ago
Forgot to change it to Input before upload. Updated project. Issue is still the same. Still after deleting and clone it again. Should i record a video ? :D
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
 - Premium support: No
 - Technology: MDB React
 - MDB Version: MDB5 1.4.0
 - Device: PC
 - Browser: Chrome
 - OS: Chrome 95.0.4638.69 Win11
 - Provided sample code: No
 - Provided link: No
 
Krzysztof Wilk staff commented 4 years ago
Hi!
How can I map this issue? The code you provided works perfectly with MDB5 React v. 1.6.0. I also used an MDBAutocomplete component instead of an MDBInput one and everything works too. Could you create a Github project or something like that with an example that shows this error?
drimaco free commented 4 years ago
Issue appears only the first time after reload and with saved credentials in chrome. https://github.com/txmazing/MDBModalissue