jQueryUI Autocomplete - cant select with mouse

Question

Can't get the jQueryUI autocomplete to work with the mouse (autocomplete input is in bootstrap modal form). Only works when selecting with the keyboard, while selecting with the mouse is completely ignored.

Here is sample code with this bug:

(Loaded CSS/JS libraries: bootstrap 5, jQuery, jQuery UI, FontAwesome) Bootstrap modal form popup.

<div class="container py-3">
    <button type="button" data-bs-toggle="modal" data-bs-target="#myModal" class="btn btn-primary">Open modal</button>
</div>
<!-- Modal popup -->
<div class="modal" tabindex="-1" id="myModal">
    <div class="modal-dialog">
        <form action="post" action="#" id="acModalForm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit form</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h1>Form</h1>
                    <hr>
                    <div class="form-floating">
                        <input type="text" class="form-control" id="acInput" placeholder="Sample autocomplete value" value="">
                        <label for="acInput">Sample autocomplete value</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </form>
    </div>
</div>

Autocomplete Javascript

$(function () {
    const sampleData = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];

    $("#acInput").autocomplete({
        source: sampleData,
        appendTo: "#acModalForm"
    });
});

Codepen

Is there some fix to this "bug"?

Any help is appreciated

Answer 1

Per the Docs:

Which element the menu should be appended to. When the value is null, the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.

I would suggest adding the ui-front class to your Modal:

$(function() {
  const sampleData = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];

  $("#acInput").autocomplete({
    source: sampleData
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<div class="container py-3">
  <button type="button" data-bs-toggle="modal" data-bs-target="#myModal" class="btn btn-primary">Open modal</button>
</div>
<!-- Modal popup -->
<div class="modal" tabindex="-1" id="myModal">
  <div class="modal-dialog">
    <form action="post" action="#" id="acModalForm">
      <div class="modal-content ui-front">
        <div class="modal-header">
          <h5 class="modal-title">Edit form</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <h1>Form</h1>
          <hr>
          <div class="form-floating">
            <input type="text" class="form-control" id="acInput" placeholder="Sample autocomplete value" value="">
            <label for="acInput">Sample autocomplete value</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </form>
  </div>
</div>