Dropdown component closes on click if dropdown-item is replaced

[ruimgoncalves]

Overview of the problem

Buefy version: 0.5.1
Vuejs version: 2.4.2
OS/Browser: Windows Chrome 60.0

Description

The dropdown component closes unexpectedly if a is clicked, but only if this element is created after the first time the dropdown is opened.

Steps to reproduce

<b-dropdown>
    <button class="button is-primary" slot="trigger">
        <span>Click me!</span>
        <b-icon icon="arrow_drop_down"></b-icon>
    </button>

   <b-dropdown-item class="" v-for="itemName in items" :key="itemName" custom>
     <p>{{itemName}}</p>
   </b-dropdown-item>
</b-dropdown>

1 - Create and populate the items array
2 - Open the dropdown and click on one of the prepopulated items, the dropdown does not close.
4 - Close de dropdown and add one item to the items array
5 - Again open the dropdown, click on the new created item, the dropdown will close

[Tirke]

dropdown doesn't like when items or content can disappear try to avoid raw v-if or v-for.

I'm not saying that's not a bug, I think it is one and a very frequent one.
But there are many workarounds and you can design very complex and useful dropdowns by simply using the custom attribute on b-dropdown-item.

<b-dropdown-item  custom>
  <div v-for="itemName in items" :key="itemName">
    {{itemName}}
  </div>
</b-dropdown-item>

You can try that.

[ruimgoncalves]

I see where you are going, but the problem remains, now it is narrowed because it only disappears if you click the itemName element.

I think, the problem is that the new created elements are not in the whitelist

[chasegiunta]

I believe this is what I just encountered... Here's an example using the dropdown in the docs