如何防止awesomeplete.js覆盖搜索栏的宽度

Question

我的导航栏中有一个搜索栏。搜索栏使用awesomeplete.js自动完成搜索下拉菜单，但是当我单击搜索按钮时，它会阻止输入字段占用导航栏中的整个空间。问题似乎来自awesomplete.js，因为当我删除它时，搜索栏的宽度按预期工作。

这是代码： https://jsfiddle.net/gavzr5Lj/

html

<nav class="navbar fixed-top navbar-light bg-steel navbar-expand-md" role="navigation">
  <div class="container">
    <a class="navbar-brand" href="{% url 'main-home' %}">What's The Update?</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02"> <!-- ADDED class --> 
      <form class="d-flex" role="search">
        <div class="input-group justify-content-end"> <!-- ADDED class --> 
          <input class="form-control awesomplete" id="search" type="text" list="games" placeholder="Search games..." />
          <datalist id="games">

                        <option value="Google.com">Google</option>
                        <option value="Yahoo.com">Yahoo</option>
                        <option value="Wikipedia.org">Wikipedia</option>
                        <option value="Bing.com">Bing</option>

                    </datalist>
          <div class="input-group-append">
            <button type="reset" class="btn">
                            <span class="far fa-times-circle">
                            <span class="sr-only">Close</span>
                            </span>
                        </button>
          </div>
          <div class="input-group-append">
            <button type="submit" class="btn btn-light">
                            <span class="fas fa-search">
                            <span class="sr-only">Search</span>
                            </span>
                        </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</nav>