[nav-item-dropdown] search box with result dropdown

I am trying to add a search box in my menu bar with a popover dropdown menu. Unfortunately because of the a-tag that’s always there I am getting some unexpecting results.

My current template is:

<b-nav class="pull-right">
  <b-nav-item-dropdown right noCaret>
    <b-input-group slot="button-content">
      <b-form-input slot="left" v-model="searchText" placeholder="search"></b-form-input>
     
      <div slot="right" class="btn btn-primary"><i class="fa fa-search"></i></div>
    </b-input-group>

    <b-popover>
      <div >
        <b-dropdown-header>no results found</b-dropdown-header>
      </div>
    </b-popover>
  </b-nav-item-dropdown>
</b-nav>

which looks like

Using the git version of bootstrap-vue this all works mostly well, except that now when I click in the input field to enter my search terms, the popup is immediately opened and focus is set on the dropdown-menu. This means I can’t type anything in the search box unless I click the input field again. Any recommendations what the best way to solve this?

[tmorehouse]

Yeah, It might be best that you generate a custom component for this type of application, rather than use one of the dropdown flavours, which were designed primarily as menus (which have keyboard navigation features which rely on a particular structure and set of subcomponents)., and nav-item-dropdown typically expects itself to be a direct child of a nav or navbar (based on BS V4 CSS).

But I think you are off to good start. I’m curious as to how it works when the navbar collapses on smaller screens (or is your navbar non-collapsing)?

[tmorehouse]

Glad we could help out some!