Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Labels
Status: Fixed / Implemented Type: Bug
Projects

Comments

@PatButlerTR
Copy link

@PatButlerTR PatButlerTR commented Jan 23, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Jan 23, 2020

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
Copy link
Author

@PatButlerTR PatButlerTR commented Jan 23, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Jan 23, 2020

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
Copy link
Author

@PatButlerTR PatButlerTR commented Jan 23, 2020

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
Copy link
Author

@PatButlerTR PatButlerTR commented Jan 23, 2020

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
Copy link
Author

@PatButlerTR PatButlerTR commented Jan 23, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Jan 24, 2020

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
Copy link
Author

@PatButlerTR PatButlerTR commented Jan 24, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Jan 24, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Jan 24, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Jan 24, 2020

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

@tmorehouse tmorehouse added this to To do in 2.3.0 via automation Jan 24, 2020
2.3.0 automation moved this from To do to Done Jan 24, 2020
@PatButlerTR
Copy link
Author

@PatButlerTR PatButlerTR commented Jan 24, 2020

great, thanks!

@PatButlerTR
Copy link
Author

@PatButlerTR PatButlerTR commented Jan 24, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment