<b-modal> @change event not triggering if the modal visible closed immediately

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

[chenxeed]

@tmorehouse thank you for the thoughts!

The reason why I put the prevention on @change is because the change event is the one that handles the v-model therefore it is the one that will run $emit('change', visible) for the parent to listen. It was working before that’s why I reported this as a bug.

I would agree and follow your suggestion that in @change event we should only handle the v-model event.

As for your suggestion above, I tried this script on the bootstrap-vue example:

<template>
  <div>
    <b-button @click="modalShow = true">Open Modal {{modalShow}}</b-button>

    <b-modal :visible="modalShow" @show="onShow">Hello From Modal!</b-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modalShow: false
      }
    },
    methods: {
      onShow(bvModalevt) {
        bvModalEvt.preventDefault()
      }
    }
  }
</script>

The onShow event doesn’t stop the modal from appearing. Is this the expected output?

[tmorehouse]

Hmmm we might not be resetting the v-model on prevent.

The best way to prevent the button from opening the modal would be to disable the button.