Endless loop Modal cause of Chrome autocomplete


Topic: Endless loop Modal cause of Chrome autocomplete

drimaco asked 3 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>

Krzysztof Wilk staff commented 3 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 commented 3 years ago

Issue appears only the first time after reload and with saved credentials in chrome. https://github.com/txmazing/MDBModalissue


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.


drimaco commented 3 years ago

Works like a charm. Thank you :)


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 commented 3 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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: 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