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

[ganlvtech]

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.'
  }
});

[emanuelmutschlechner]

As documented here onFocusout brings the focus back when tabbing.

I think this is only a minor issue because no one will hold down the left mouse when clicking on the backdrop

[ganlvtech]

Enforce focus is a feature that only Bootstrap Vue has. So set no-enforce-focus to true will get behavior like pure Bootstrap.

Is that interpretation right?

[emanuelmutschlechner]

@ganlvtech No, setting no-enforce-focus to true is not pure Bootstrap. This is a minor bug in BootstrapVue.

Click "Launch demo modal" and press TAB. You will see how the focus cycles through elements in the modal, which is exactly what enforce focus is doing
https://getbootstrap.com/docs/4.0/components/modal/#live-demo

[ganlvtech]

Thanks, I got it. It's only a minor bug.

[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.