Why are some of the input HTML tags unresponsive?


Topic: Why are some of the input HTML tags unresponsive?

allen546 asked 2 years ago

I've noticed that some of the input modals on https://mdbootstrap.com/docs/standard/extended/login/ (Variation #7) is a bit unresponsive when running on Safari. I've tested Chrome and it's fine. The inputs don't get focused when clicked once and had to be clicked 2-4 times to be focused. I've copied the code into a local file and it still doesn't work. Here's the modal code (I've edited the original code on the link above so it actually launched as a modal):

<div class="modal top fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true">
    <div class="modal-dialog  ">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="card-body p-5 text-center">

            <h3 class="mb-5">Sign in</h3>

            <div class="form-outline mb-4">
              <input type="email" id="typeEmailX-2" class="form-control form-control-lg" />
              <label class="form-label" for="typeEmailX-2">Email</label>
            </div>

            <div class="form-outline mb-4">
              <input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
              <label class="form-label" for="typePasswordX-2">Password</label>
            </div>

            <!-- Checkbox -->
            <div class="form-check d-flex justify-content-start mb-4">
              <input class="form-check-input" type="checkbox" value="" id="form1Example3" />
              <label class="form-check-label" for="form1Example3"> Remember me </label>
            </div>

            <button class="btn btn-primary btn-lg btn-block" type="submit">Login</button>

            <hr class="my-4">

            <button class="btn btn-lg btn-block btn-primary" style="background-color: #dd4b39;"
              type="submit"><i class="fab fa-google me-2"></i> Sign in with google</button>
            <button class="btn btn-lg btn-block btn-primary mb-2" style="background-color: #3b5998;"
              type="submit"><i class="fab fa-facebook-f me-2"></i>Sign in with facebook</button>

          </div>              
        </div>

      </div>
    </div>
  </div>

*Note: The launch button was concealed into a button on a navbar. **Note: I've lost a few divs and classes from the original page but none of them had any affect as the page on the link had the same problem.


mlazaru staff commented 2 years ago

I tried to reproduce this problem using Safari 16, but it works fine with your code and in the docs example as well. Please check if the input focuses on the first click after a few seconds delay. Do you see this bug only in variation #7?


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 6.1.0
  • Device: MacBook Pro with CPU M1 Pro (though I think it's not important)
  • Browser: Safari 16.3 (18614.4.6.1.6)
  • OS: MacOS Ventura 13.2.1
  • Provided sample code: No
  • Provided link: Yes