Modal Does Not Pop Up When Using Button Directive When Version is > 2.0.0

[PatButlerTR]

Describe the bug

Modal does not pop up when using button directive when version is > 2.0.0.

Steps to reproduce the bug

Create a modal and use the b-v-modal directive as described here:
https://bootstrap-vue.org/docs/components/modal/

Expected behavior

The modal pops open when the button is clicked.

Code

<div>
  <b-button v-b-modal.my-modal>Show Modal</b-button>

  <b-modal id="my-modal">Hello From My Modal!</b-modal>
</div>

Versions

Libraries:

• > BootstrapVue: 2.0

[tmorehouse]

Could you provide a minimal reproduction of your issue? The docs are working fine for me.

Also, how are you importing BootstrapVue into your project? (the full BootstrapVue, or just the ModalPlugin, or the BModal component and VBModal directive?)

[PatButlerTR]

I can't seem to reproduce on a smaller hello world project, but one of the weird things about it not opening was that there were no errors produced so I could not debug what was wrong. I ended up reverting back to 2.0.0-rc.23, but anything newer than that, the modal will not open.

[tmorehouse]

How are you importing BootstrapVue and registering the components/directives? Without any examples it is hard to provide assistance.

One thing to make sure is that your modal ID is all lower case and has no spaces, and starts with a letter.

[PatButlerTR]

I am just importing the modal plugin. Here is how I use it:

<b-button
    v-b-modal.edit-user
    variant="info"
    @click="selectedUser = JSON.parse(JSON.stringify(user))"
    >
    <font-awesome-icon icon="edit" />
 </b-button>


 <b-modal
    id="edit-user"
    ref="edit-user"
    scrollable
    :no-close-on-backdrop="processing"
    :no-close-on-esc="processing"
    @hide="requestFailed=false;editSuccessful=false;"
 >

    <!-- Header -->
    <div
    slot="modal-header"
    class="text-left"
    style="width: 100%;"
    >
      <!-- stuff here -->
    </div>
    <!-- Body -->
    <b-row style="text-align: left">
        <!-- stuff here -->
    </b-row>
    <hr class="mb-0">
    <!-- Footer -->
    <b-row
    slot="modal-footer"
    style="width: 100%"
    align-v="center"
    >
        <!-- stuff here -->
    </b-row>
</b-modal>

[PatButlerTR]

here's the import:

import { ModalPlugin, ButtonPlugin } from 'bootstrap-vue'

Vue.use(ModalPlugin)
Vue.use(ButtonPlugin)

There's other plugins but those are the two that matter for this example

[PatButlerTR]

package.json:

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:staging": "vue-cli-service build --mode staging",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service test:unit --coverage"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.19",
    "@fortawesome/free-regular-svg-icons": "^5.9.0",
    "@fortawesome/free-solid-svg-icons": "^5.9.0",
    "@fortawesome/vue-fontawesome": "^0.1.6",
    "axios": "^0.19.0",
    "bootstrap-vue": "2.2.2",
    "core-js": "^3",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-pwa": "^4.1.0",
    "@vue/cli-plugin-typescript": "^4.1.0",
    "@vue/cli-plugin-unit-jest": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "flush-promises": "^1.0.2",
    "moxios": "^0.4.0",
    "sass": "^1.23.7",
    "sass-loader": "^8.0.0",
    "typescript": "^3.4.3",
    "vue-cli-plugin-bootstrap-vue": "^0.4.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.3"
  }
}

[tmorehouse]

It might be an issue with having both the directive and @click handler on the button.

try this instead:

<b-button
    variant="info"
    @click="selectedUser=JSON.parse(JSON.stringify(user));$bvModal.show('edit-user')"
    >
    <font-awesome-icon icon="edit" />
 </b-button>

[PatButlerTR]

That fixed it, thanks! So is that a bug then? Looks like it may because the b-v-modal adds its own click listener:

"If the element is anything other than a <button> (or component that renders a <button>), the ARIA role will be set to button, and a keydown event listeners for ENTER and SPACE will be added, along with a click listener."

Can this be fixed, or at least a note in the documentation that you cannot have your own click listener when using b-v-modal?

[tmorehouse]

We'll have to check to see what the code is doing in the directive (or perhaps it is b-button that has the issue with multiple listeners). It technically should allow multiple click handlers to be bound to the element (the extra handlers are added only if the element is not a button element)

[tmorehouse]

I just created a simple JsFiddle: https://jsfiddle.net/gjphz8w7/

Which appears to be working fine (both the modal opens and the console.log happens.

But I did notice that if I try to modify the component state in the log click handler that the modal doesn't open. But, if I put hte state modification in a this.$nextTick() => {...}) then all works fine.

It is almost as if the state change is causing the app to re-render, which causes b-button to re-render (it is a functional component) which then in-turn causes the modal directive to be destroyed and re-instantiated on the element causing the modal show event to not be emitted.

We may need to convert b-button to a full component (instead of a functional component) so that it doesn't destroy the directive when it re-renders.

[tmorehouse]

Found the issue and it will be fixed in v2.3.0 coming out soon.

[PatButlerTR]

great, thanks!

[PatButlerTR]

I was modifying component state in the click handler so that makes sense.