'Jquery TokenInput - can't select first element with cursor

I have a bootstrap (v5.1.3) card which includes an autocomplete field using jQuery's TokenInput.

It's all working, but I can't seem to access the first element of the field with my cursor. I can access it when using the arrow and enter keys. When I remove the input field outside of the card, it works. I'm wondering why this happens and how to solve this?

<script type="text/javascript">
  $(document).ready(function() {
      $("#autocomplete").tokenInput([
          {id: 7, name: "Ruby"},
          {id: 11, name: "Python"},
          {id: 13, name: "JavaScript"},
          {id: 17, name: "ActionScript"},
          {id: 19, name: "Scheme"},
          {id: 23, name: "Lisp"},
          {id: 29, name: "C#"},
          {id: 31, name: "Fortran"},
          {id: 37, name: "Visual Basic"},
          {id: 41, name: "C"},
          {id: 43, name: "C++"},
          {id: 47, name: "Java"}
      ]);
  });
</script>

/* Example tokeninput style #2: Facebook style */
ul.token-input-list-facebook {
    overflow: hidden; 
    height: auto !important; 
    height: 1%;
    width: 400px;
    border: 1px solid #8496ba;
    cursor: text;
    font-size: 12px;
    font-family: Verdana;
    min-height: 1px;
    z-index: 999;
    margin: 0;
    padding: 0;
    background-color: #fff;
    list-style-type: none;
    clear: left;
}

ul.token-input-list-facebook li input {
    border: 0;
    width: 100px;
    padding: 3px 8px;
    background-color: white;
    margin: 2px 0;
    -webkit-appearance: caret;
}

li.token-input-token-facebook {
    overflow: visible; 
    height: auto !important; 
    height: 15px;
    margin: 3px;
    padding: 1px 3px;
    background-color: #eff2f7;
    color: #000;
    cursor: default;
    border: 1px solid #ccd5e4;
    font-size: 11px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    float: left;
    white-space: nowrap;
}

li.token-input-token-facebook p {
    display: inline;
    padding: 0;
    margin: 0;
}

li.token-input-token-facebook span {
    color: #a6b3cf;
    margin-left: 5px;
    font-weight: bold;
    cursor: pointer;
}

li.token-input-selected-token-facebook {
    background-color: #5670a6;
    border: 1px solid #3b5998;
    color: #fff;
}

li.token-input-input-token-facebook {
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

div.token-input-dropdown-facebook {
    position: absolute;
    width: 400px;
    background-color: #fff;
    overflow: hidden;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    cursor: default;
    font-size: 11px;
    font-family: Verdana;
    z-index: 1;
}

div.token-input-dropdown-facebook p {
    margin: 0;
    padding: 5px;
    font-weight: bold;
    color: #777;
}

div.token-input-dropdown-facebook ul {
    margin: 0;
    padding: 0;
}

div.token-input-dropdown-facebook ul li {
    background-color: #fff;
    padding: 3px;
    margin: 0;
    list-style-type: none;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook {
    background-color: #fff;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook {
    background-color: #fff;
}

div.token-input-dropdown-facebook ul li em {
    font-weight: bold;
    font-style: normal;
}

div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
    background-color: #3b5998;
    color: #fff;
}

<html lang="en">
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="static/assets/js/jquery.tokeninput.js"></script>

  <link rel="stylesheet" href="static/assets/styles/token-input-facebook.css" type="text/css" />
  


</head>
<body>
  <div class="card">
    <div class="card-body">
      <input type="text" id="autocomplete" class="form-control" placeholder="Search...">
    </div>
  </div>
</body>
</html>

Solution 1:^[1]

Your code snippet doesn't run, but I made a few small modifications to it so it'd run in a snippet and it seems to work fine for me (that is, I can click the first item with my cursor).

The only real difference here is I passed a configuration object as the second parameter to tokenInput() to make sure that "facebook" is appended to the css classes. I also changed the width of the input so it'd play nice with bootstrap.

Am I missing something?

$(document).ready(function() {
  $("#autocomplete").tokenInput([{
      id: 7,
      name: "Ruby"
    },
    {
      id: 11,
      name: "Python"
    },
    {
      id: 13,
      name: "JavaScript"
    },
    {
      id: 17,
      name: "ActionScript"
    },
    {
      id: 19,
      name: "Scheme"
    },
    {
      id: 23,
      name: "Lisp"
    },
    {
      id: 29,
      name: "C#"
    },
    {
      id: 31,
      name: "Fortran"
    },
    {
      id: 37,
      name: "Visual Basic"
    },
    {
      id: 41,
      name: "C"
    },
    {
      id: 43,
      name: "C++"
    },
    {
      id: 47,
      name: "Java"
    }
  ], {
    theme: "facebook"
  });
});

/* Example tokeninput style #2: Facebook style */

ul.token-input-list-facebook {
  overflow: hidden;
  height: auto !important;
  height: 1%;
  width: 100%;
  border: 1px solid #8496ba;
  cursor: text;
  font-size: 12px;
  font-family: Verdana;
  min-height: 1px;
  z-index: 999;
  margin: 0;
  padding: 0;
  background-color: #fff;
  list-style-type: none;
  clear: left;
}

ul.token-input-list-facebook li input {
  border: 0;
  width: 100px;
  padding: 3px 8px;
  background-color: white;
  margin: 2px 0;
  -webkit-appearance: caret;
}

li.token-input-token-facebook {
  overflow: visible;
  height: auto !important;
  height: 15px;
  margin: 3px;
  padding: 1px 3px;
  background-color: #eff2f7;
  color: #000;
  cursor: default;
  border: 1px solid #ccd5e4;
  font-size: 11px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  float: left;
  white-space: nowrap;
}

li.token-input-token-facebook p {
  display: inline;
  padding: 0;
  margin: 0;
}

li.token-input-token-facebook span {
  color: #a6b3cf;
  margin-left: 5px;
  font-weight: bold;
  cursor: pointer;
}

li.token-input-selected-token-facebook {
  background-color: #5670a6;
  border: 1px solid #3b5998;
  color: #fff;
}

li.token-input-input-token-facebook {
  float: left;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

div.token-input-dropdown-facebook {
  position: absolute;
  width: 400px;
  background-color: #fff;
  overflow: hidden;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  cursor: default;
  font-size: 11px;
  font-family: Verdana;
  z-index: 1;
}

div.token-input-dropdown-facebook p {
  margin: 0;
  padding: 5px;
  font-weight: bold;
  color: #777;
}

div.token-input-dropdown-facebook ul {
  margin: 0;
  padding: 0;
}

div.token-input-dropdown-facebook ul li {
  background-color: #fff;
  padding: 3px;
  margin: 0;
  list-style-type: none;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook {
  background-color: #fff;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook {
  background-color: #fff;
}

div.token-input-dropdown-facebook ul li em {
  font-weight: bold;
  font-style: normal;
}

div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
  background-color: #3b5998;
  color: #fff;
}

<html lang="en">
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tokeninput/1.6.0/jquery.tokeninput.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="card-body">
        <input type="text" id="autocomplete" class="form-control" placeholder="Search...">
      </div>
    </div>
  </div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Brendan Bond

'Jquery TokenInput - can't select first element with cursor

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]