{"action":"closed","issue":{"url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/971","repository_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue","labels_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/971/labels{/name}","comments_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/971/comments","events_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/971/events","html_url":"https://github.com/bootstrap-vue/bootstrap-vue/issues/971","id":254164794,"number":971,"title":"Modal is stop scrolling after open the other modal nested of it","user":{"login":"mirzaakhena","id":927750,"avatar_url":"https://avatars3.githubusercontent.com/u/927750?v=4","gravatar_id":"","url":"https://api.github.com/users/mirzaakhena","html_url":"https://github.com/mirzaakhena","followers_url":"https://api.github.com/users/mirzaakhena/followers","following_url":"https://api.github.com/users/mirzaakhena/following{/other_user}","gists_url":"https://api.github.com/users/mirzaakhena/gists{/gist_id}","starred_url":"https://api.github.com/users/mirzaakhena/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mirzaakhena/subscriptions","organizations_url":"https://api.github.com/users/mirzaakhena/orgs","repos_url":"https://api.github.com/users/mirzaakhena/repos","events_url":"https://api.github.com/users/mirzaakhena/events{/privacy}","received_events_url":"https://api.github.com/users/mirzaakhena/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2017-08-30T23:26:38Z","updated_at":"2017-08-31T01:25:09Z","closed_at":"2017-08-31T01:25:09Z","author_association":"NONE","body":"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 :\r\n\r\n1. 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.\r\n\r\n2. 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.\r\n\r\n3. After we close the ZSecondDialog, the ZFirstDialog is stuck and cannot scroll anymore. This is the main issue (bug).\r\n\r\nhere is the sample code that you can use to try\r\n\r\nThis is the `ZContent.vue` where we can find the button of ZFirstDialog\r\n\r\n```\r\n<template>\r\n  <div>\r\n    <div class=\"tengap\"><h4>Some Label here</h4></div>\r\n    <b-btn v-b-modal=\"'z-first-dialog'\" variant=\"primary\">Call First Modal</b-btn>        \r\n    <z-first-dialog></z-first-dialog>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import ZFirstDialog from './ZFirstDialog'\r\n\r\n  export default {\r\n    components: {\r\n      ZFirstDialog\r\n    }\r\n  }\r\n</script>\r\n\r\n```\r\n\r\nThis is the `ZFirstDialog.vue`. Sorry for the long code.\r\n\r\n```\r\n<template>\r\n  <b-modal \r\n            \r\n      id=\"z-first-dialog\"      \r\n      ref=\"z-first-dialog\"\r\n      title=\"Create The something First\">\r\n\r\n        <form @submit.stop.prevent=\"handleSubmit\">\r\n\r\n          <b-form-group\r\n            description=\"blablabla\"\r\n            id=\"exampleInputGroup1\"\r\n            label=\"First Field\" \r\n            label-for=\"exampleInput1\">\r\n            <b-form-input \r\n              id=\"exampleInput1\"\r\n              type=\"text\"  \r\n              required\r\n              placeholder=\"The First Field is here\">\r\n              </b-form-input>\r\n          </b-form-group>\r\n\r\n          <b-input-group left=\"$\">\r\n            <b-form-input></b-form-input>\r\n          </b-input-group>\r\n\r\n          <b-form-group\r\n            description=\"blablabla\"\r\n            id=\"exampleInputGroup1\"\r\n            label=\"Another Field\" \r\n            label-for=\"exampleInput1\">\r\n            <b-form-input \r\n              id=\"exampleInput1\"\r\n              type=\"text\"  \r\n              required\r\n              placeholder=\"The Another Field is here\">\r\n              </b-form-input>\r\n          </b-form-group>\r\n\r\n          <b-form-group\r\n            description=\"blablabla\"\r\n            id=\"exampleInputGroup1\"\r\n            label=\"Just want to make sure its long enough Field\" \r\n            label-for=\"exampleInput1\">\r\n            <b-form-input \r\n              id=\"exampleInput1\"\r\n              type=\"text\"  \r\n              required\r\n              placeholder=\"The First Field is here\">\r\n              </b-form-input>\r\n          </b-form-group> \r\n\r\n          <b-input-group right=\".00\">\r\n              <b-form-input></b-form-input>\r\n          </b-input-group>\r\n\r\n          <b-form-group\r\n            description=\"blablabla\"\r\n            id=\"exampleInputGroup1\"\r\n            label=\"Blablab Field\" \r\n            label-for=\"exampleInput1\">\r\n            <b-form-input \r\n              id=\"exampleInput1\"\r\n              type=\"text\"  \r\n              required\r\n              placeholder=\"The First Field is here\">\r\n              </b-form-input>\r\n          </b-form-group>          \r\n\r\n          <b-form-group \r\n            id=\"exampleInputGroup3\"\r\n            label=\"Components\" \r\n            label-for=\"exampleInput3\">\r\n            <b-btn v-b-modal=\"'z-second-dialog'\" variant=\"primary\" >Call the second Modal</b-btn>\r\n            <z-second-dialog></z-second-dialog>\r\n            <b-table :fields=\"fields\" :items=\"records\" bordered>  \r\n              <template slot=\"quantity\" scope=\"data\">\r\n                {{data.value}} {{data.item.unit}}\r\n              </template>\r\n\r\n            </b-table>\r\n          </b-form-group> \r\n\r\n          <b-form-checkbox id=\"checkbox1\" value=\"accepted\" unchecked-value=\"not_accepted\">\r\n            I accept terms and use\r\n          </b-form-checkbox>\r\n          <div>State: <strong>AAAA</strong></div>\r\n\r\n          <b-list-group>\r\n            <b-list-group-item>\r\n              Awesome list\r\n            </b-list-group-item>\r\n            <b-list-group-item href=\"#\">\r\n              Action links are easy\r\n            </b-list-group-item>\r\n            <b-list-group-item>\r\n              This is a text only item\r\n            </b-list-group-item>\r\n          </b-list-group>\r\n\r\n          <b-form-group\r\n            description=\"blablabla\"\r\n            id=\"exampleInputGroup1\"\r\n            label=\"First Field\" \r\n            label-for=\"exampleInput1\">\r\n            <b-form-input \r\n              id=\"exampleInput1\"\r\n              type=\"text\"  \r\n              required\r\n              placeholder=\"The First Field is here\">\r\n              </b-form-input>\r\n          </b-form-group>\r\n\r\n          <b-form-group\r\n            description=\"blablabla\"\r\n            id=\"exampleInputGroup1\"\r\n            label=\"First Field\" \r\n            label-for=\"exampleInput1\">\r\n            <b-form-input \r\n              id=\"exampleInput1\"\r\n              type=\"text\"  \r\n              required\r\n              placeholder=\"The First Field is here\">\r\n              </b-form-input>\r\n          </b-form-group>                    \r\n\r\n        </form>\r\n    </b-modal>  \r\n</template>\r\n\r\n<script>\r\n  import ZSecondDialog from './ZSecondDialog'\r\n\r\n  export default {\r\n    components: {\r\n      ZSecondDialog\r\n    },\r\n    data () {\r\n      return {\r\n        fields: {\r\n          code: { label: 'Code' },\r\n          name: { label: 'Name' },\r\n          quantity: { label: 'Qty' }\r\n        },\r\n        records: [\r\n          { code: 'RM_13123', name: 'First', quantity: 12, unit: 'kg' },\r\n          { code: 'RM_334422', name: 'Second', quantity: 8, unit: 'pcs' },\r\n          { code: 'RM_72842', name: 'Third', quantity: 4, unit: 'lt' }\r\n        ]\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n```\r\n\r\nAnd the last one is `ZSecondDialog.vue`\r\n\r\n```\r\n<template>\r\n  <b-modal     \r\n      id=\"z-second-dialog\"      \r\n      ref=\"z-second-dialog\"\r\n      title=\"Add new Soemthing\">\r\n\r\n        <form @submit.stop.prevent=\"handleSubmit\">\r\n\r\n          <b-form-group \r\n            id=\"exampleInputGroup3\"\r\n            label=\"Nama \" \r\n            label-for=\"exampleInput3\">\r\n            <b-form-select \r\n              id=\"exampleInput3\"\r\n              :options=\"rawMaterials\" \r\n              required>\r\n            </b-form-select>\r\n          </b-form-group> \r\n\r\n          <b-form-group             \r\n            id=\"exampleInputGroup2\"\r\n            label=\"Quantity\" \r\n            label-for=\"exampleInput2\">\r\n            <b-input-group \r\n              right=\"Kg\">\r\n              <b-form-input \r\n                id=\"exampleInput2\"\r\n                type=\"text\" \r\n                required\r\n                placeholder=\"Amount of something\">\r\n              </b-form-input>\r\n            </b-input-group>\r\n          </b-form-group>\r\n\r\n        </form>\r\n    </b-modal>  \r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    data () {\r\n      return {\r\n        rawMaterials: ['The first', 'second', 'thirt', 'Fourth']\r\n      }\r\n    }\r\n  }\r\n</script>\r\n```\r\n\r\nin the `package.json`\r\n```\r\n  \"dependencies\": {\r\n    \"bootstrap-vue\": \"^1.0.0-beta.6\",\r\n    \"vue\": \"^2.4.2\"\r\n  },\r\n```\r\n\r\nThank you for this awesome project..!!"}}
{"actor":{"display_login":"tmorehouse"}}