Modal is stop scrolling after open the other modal nested of it

I have two modal (i call it dialog) that is nested from one to the other. Let call them the ZFirstDialog and the ZSecondDialog. The ZFirstDialog is very long dialog that we can scroll on it. In the middle of ZFirstDialog we have a button that call the ZSecondDialog. The issue is here :

1. When i call the ZSecondDialog the ZFirstDialog (behind of it) is (auto) scroll up the top. My expectation is the ZFirstDialog is just stay in there while the ZSecondDialog is opened.

2. While the ZSecondDialog is still opened, i can scroll on it. My Expectation is the ZSecondDialog cannot scrolled. Since the ZSecondDialog is not as long as the ZFirstDialog.

3. After we close the ZSecondDialog, the ZFirstDialog is stuck and cannot scroll anymore. This is the main issue (bug).

here is the sample code that you can use to try

This is the ZContent.vue where we can find the button of ZFirstDialog

<template>
  <div>
    <div class="tengap"><h4>Some Label here</h4></div>
    <b-btn v-b-modal="'z-first-dialog'" variant="primary">Call First Modal</b-btn>        
    <z-first-dialog></z-first-dialog>
  </div>
</template>

<script>
  import ZFirstDialog from './ZFirstDialog'

  export default {
    components: {
      ZFirstDialog
    }
  }
</script>

This is the ZFirstDialog.vue. Sorry for the long code.

<template>
  <b-modal 
            
      id="z-first-dialog"      
      ref="z-first-dialog"
      title="Create The something First">

        <form @submit.stop.prevent="handleSubmit">

          <b-form-group
            description="blablabla"
            id="exampleInputGroup1"
            label="First Field" 
            label-for="exampleInput1">
            <b-form-input 
              id="exampleInput1"
              type="text"  
              required
              placeholder="The First Field is here">
              </b-form-input>
          </b-form-group>

          <b-input-group left="$">
            <b-form-input></b-form-input>
          </b-input-group>

          <b-form-group
            description="blablabla"
            id="exampleInputGroup1"
            label="Another Field" 
            label-for="exampleInput1">
            <b-form-input 
              id="exampleInput1"
              type="text"  
              required
              placeholder="The Another Field is here">
              </b-form-input>
          </b-form-group>

          <b-form-group
            description="blablabla"
            id="exampleInputGroup1"
            label="Just want to make sure its long enough Field" 
            label-for="exampleInput1">
            <b-form-input 
              id="exampleInput1"
              type="text"  
              required
              placeholder="The First Field is here">
              </b-form-input>
          </b-form-group> 

          <b-input-group right=".00">
              <b-form-input></b-form-input>
          </b-input-group>

          <b-form-group
            description="blablabla"
            id="exampleInputGroup1"
            label="Blablab Field" 
            label-for="exampleInput1">
            <b-form-input 
              id="exampleInput1"
              type="text"  
              required
              placeholder="The First Field is here">
              </b-form-input>
          </b-form-group>          

          <b-form-group 
            id="exampleInputGroup3"
            label="Components" 
            label-for="exampleInput3">
            <b-btn v-b-modal="'z-second-dialog'" variant="primary" >Call the second Modal</b-btn>
            <z-second-dialog></z-second-dialog>
            <b-table :fields="fields" :items="records" bordered>  
              <template slot="quantity" scope="data">
                {{data.value}} {{data.item.unit}}
              </template>

            </b-table>
          </b-form-group> 

          <b-form-checkbox id="checkbox1" value="accepted" unchecked-value="not_accepted">
            I accept terms and use
          </b-form-checkbox>
          <div>State: <strong>AAAA</strong></div>

          <b-list-group>
            <b-list-group-item>
              Awesome list
            </b-list-group-item>
            <b-list-group-item href="#">
              Action links are easy
            </b-list-group-item>
            <b-list-group-item>
              This is a text only item
            </b-list-group-item>
          </b-list-group>

          <b-form-group
            description="blablabla"
            id="exampleInputGroup1"
            label="First Field" 
            label-for="exampleInput1">
            <b-form-input 
              id="exampleInput1"
              type="text"  
              required
              placeholder="The First Field is here">
              </b-form-input>
          </b-form-group>

          <b-form-group
            description="blablabla"
            id="exampleInputGroup1"
            label="First Field" 
            label-for="exampleInput1">
            <b-form-input 
              id="exampleInput1"
              type="text"  
              required
              placeholder="The First Field is here">
              </b-form-input>
          </b-form-group>                    

        </form>
    </b-modal>  
</template>

<script>
  import ZSecondDialog from './ZSecondDialog'

  export default {
    components: {
      ZSecondDialog
    },
    data () {
      return {
        fields: {
          code: { label: 'Code' },
          name: { label: 'Name' },
          quantity: { label: 'Qty' }
        },
        records: [
          { code: 'RM_13123', name: 'First', quantity: 12, unit: 'kg' },
          { code: 'RM_334422', name: 'Second', quantity: 8, unit: 'pcs' },
          { code: 'RM_72842', name: 'Third', quantity: 4, unit: 'lt' }
        ]
      }
    }
  }
</script>

And the last one is ZSecondDialog.vue

<template>
  <b-modal     
      id="z-second-dialog"      
      ref="z-second-dialog"
      title="Add new Soemthing">

        <form @submit.stop.prevent="handleSubmit">

          <b-form-group 
            id="exampleInputGroup3"
            label="Nama " 
            label-for="exampleInput3">
            <b-form-select 
              id="exampleInput3"
              :options="rawMaterials" 
              required>
            </b-form-select>
          </b-form-group> 

          <b-form-group             
            id="exampleInputGroup2"
            label="Quantity" 
            label-for="exampleInput2">
            <b-input-group 
              right="Kg">
              <b-form-input 
                id="exampleInput2"
                type="text" 
                required
                placeholder="Amount of something">
              </b-form-input>
            </b-input-group>
          </b-form-group>

        </form>
    </b-modal>  
</template>

<script>
  export default {
    data () {
      return {
        rawMaterials: ['The first', 'second', 'thirt', 'Fourth']
      }
    }
  }
</script>

in the package.json

  "dependencies": {
    "bootstrap-vue": "^1.0.0-beta.6",
    "vue": "^2.4.2"
  },

Thank you for this awesome project…!!

[tmorehouse]

Bootstrap doesn’t allow nested modals or multiple open modals at the same time.

[tmorehouse]

Both Bootstrap V3 and Bootstrap V4 do not support multiple modals open: https://getbootstrap.com/docs/4.0/components/modal/#how-it-works

Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed. …

• Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.

Since Bootstrap-Vue tries to follow Bootstrap V4 features as close as possible, Bootstrap-Vue doesn’t support staked modals. Bootstrap-Vue uses Bootstrap V4 CSS which dictates what can and can’t be done.