modal with long content on click backdrop will scroll to .modal-content top

System Information

• Windows 10
• Google Chrome (64bit) 64.0.3282.186

Description

Test code can be found on CodePen. I have also run the test code on Edge and IE 11. There is nothing wrong on Edge. But on IE 11, it has the same problem.

When I click the backdrop and hold left mouse button down, the content will scroll to .modal-content 's top. As a result, the scrollTop attribute of .modal will change to 28px (or 1.75rem) from zero.

I found it may be caused by the onFocusout listener of .modal-content. I can set no-enforce-force to true to prevent this problem, but I don’t know the reason why browsers behave differently.

Test script

<div id="app">
  <b-btn @click="show = true">Show modal</b-btn>
  <b-modal v-model="show">
    <p class="my-4">{{ content }}</p>
  </b-modal>
</div>

var app = new Vue({
  el: '#app',
  data: {
    show: false,
    content: 'A modal with ' + 'very '.repeat(500) + 'long content.'
  }
});

[evgenyvas]

In onFocusout function instead of content.focus() must be: content.focus({preventScroll: true}) It fix this bug for me.

[ganlvtech]

content.focus({preventScroll: true})

Nice solution! It helps a lot for me.