Describe the bug

There is a changed behavior in <b-modal> after the release of v2.0.0-rc.12 and perhaps specifically because of this PR.

When we need to directly hide the modal on @change event, it was working before. For example:

(note: You can try this script on the modal example

<template>
  <div>
    <b-button @click="modalShow = true">Open Modal {{modalShow}}</b-button>
    <b-modal :visible="modalShow" @change="modalShow = false">Hello From Modal!</b-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modalShow: false
      }
    }
  }
</script>

On first click the button, it will set the modalShow to true and directly back to false. On the second click and next after, it will set modalShow to true and never set back to false anymore.

By right, the modalShow should always be false whenever we click the button, because when the modal show and @change event triggered, it will directly set to false. This is working back in v2.0.0-rc.11 before.

I found out the culprit is because on the 2nd click, the flag is_closing is still true therefore it prevents the show function from running further.

Steps to reproduce the bug

1. Copy paste the script I add above to the modal example
2. Click the "Open Modal" button.
3. On first click, the showModal flag will be set back to false
4. On second click, the showModal will be set to true and never be false anymore.

Expected behavior

The flag showModal should be back to false, as the @change event should be triggered.

Versions

Libraries:

• BootstrapVue: 2.0.0-rc.12
• Bootstrap: 4.3.1
• Vue: 2.6.0

Environment:

• Device: Mac
• OS: MacOS
• Browser: Chrome
• Version: 73

Demo link

Try the script pasted above in the bootstrap vue website modal example