Skip to content

Commit 3728892

Browse files
tmorehousetmorehouse
authored
feat(b-modal): improved portaling - retaining parent-child hierarchy (addresses #3312) (#3326)
1 parent d14c392 commit 3728892

File tree

7 files changed

+281
-136
lines changed

7 files changed

+281
-136
lines changed

‎src/components/modal/README.md

+22-10
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,12 @@ via the `modal-header` slot, and override the footer completely via the `modal-f
3737
present. Also, if you use the `modal-header` slot, the default header `X` close button will not be
3838
present, nor can you use the `modal-title` slot.
3939

40+
<span class="badge badge-warning small">CHANGED in 2.0.0-rc.20</span> Modals will not render their
41+
content in the document until they are shown (lazily rendered). Modals, when visible, are rendered
42+
**appended to the `<body>` element**. The placement of the `<b-modal>` component will not affect layout,
43+
as it always renders as a placeholder comment node (`<!---->`). You can revert to the behaviour of
44+
previous BootstrapVue versions via the use of the [`static` prop](#lazy-loading-and-static-modals).
45+
4046
## Toggle modal visibility
4147

4248
There are several methods that you can employ to toggle the visibility of `<b-modal>`.
@@ -144,6 +150,9 @@ methods.
144150
The `hide()` method accepts an optional string `trigger` argument for defining what triggered the
145151
modal to close. See section [Prevent Closing](#prevent-closing) below for details.
146152

153+
**Note:** It is reccomended to use the `this.$bvModal.show()` and `this.$bvModal.hide()` methods
154+
(mentioned in the previous section) instead of using `$ref` methods.
155+
147156
### Using `v-model` property
148157

149158
`v-model` property is always automatically synced with `<b-modal>` visible state and you can
@@ -171,7 +180,7 @@ show/hide using `v-model`.
171180
<!-- b-modal-v-model.vue -->
172181
```
173182

174-
When using the `v-model` property, do not use the `visible` property at the same time.
183+
When using the `v-model` prop, **do not** use the `visible` prop at the same time.
175184

176185
### Using scoped slot scope methods
177186

@@ -214,6 +223,9 @@ export default {
214223
}
215224
```
216225

226+
**Note:** It is reccomended to use the `this.$bvModal.show()` and `this.$bvModal.hide()` methods
227+
(mentioned in a previous section) instead of emitting `$root` events.
228+
217229
### Prevent closing
218230

219231
To prevent `<b-modal>` from closing (for example when validation fails). you can call the
@@ -366,23 +378,23 @@ are appended by specifying a container ID (refer to tooltip and popover docs for
366378

367379
## Lazy loading and static modals
368380

369-
<span class="badge badge-info small">ENHANCED in 2.0.0-rc.20</span>
381+
<span class="badge badge-info small">NEW in 2.0.0-rc.20</span>
370382

371383
By default, modals will not render their content in the document until they are shown (lazily
372-
rendered). Modals that are visible are rendered appended to the `<body>` element (via the use of
373-
[PortalVue](https://portal-vue.linusb.org/)) inside a modal target `<div>` when they are visible.
374-
`<b-modal>` components will not affect layout, as they render as a placeholder comment node
375-
(`<!---->`).
384+
rendered). Modals that, when visible, are rendered appended to the `<body>` element. The `<b-modal>`
385+
component will not affect layout, as they render as a placeholder comment node (`<!---->`) in the
386+
DOM position they are placed. Due to the portalling process, it can take two or more `$nextTick`s to
387+
render changes of the content into the target.
376388

377-
Modals can be rendered _in-place_ in the document, where the `<b-modal>` component is placed in the
378-
document, by setting the `static` prop to `true`. Note that the content of the modal will be
389+
Modals can be rendered _in-place_ in the document (i.e. where the `<b-modal>` component is placed in
390+
the document) by setting the `static` prop to `true`. Note that the content of the modal will be
379391
rendered in the DOM even if the modal is not visible/shown when `static` is `true`. To make `static`
380392
modals lazy rendered, also set the `lazy` prop to `true`. The modal will then appear in the
381393
document _only_ when it is visible. Note, when in `static` mode, placement of the `<b-modal>`
382-
component may affect layout of your document and the modal.
394+
component _may affect layout_ of your document and the modal.
383395

384396
The `lazy` prop will have no effect if the prop `static` is not `true` (non-static modals will
385-
always be lazily rendered).
397+
_always_ be lazily rendered).
386398

387399
## Styling, options, and customization
388400

‎src/components/modal/helpers/modal-manager.js

-30
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
*/
55

66
import Vue from '../../../utils/vue'
7-
import { Wormhole } from 'portal-vue'
87
import {
98
getAttr,
109
hasAttr,
@@ -19,7 +18,6 @@ import {
1918
} from '../../../utils/dom'
2019
import { isBrowser } from '../../../utils/env'
2120
import { isNull } from '../../../utils/inspect'
22-
import BModalTarget, { modalTargetName } from './modal-target'
2321

2422
// --- Constants ---
2523

@@ -49,9 +47,6 @@ const ModalManager = Vue.extend({
4947
},
5048
modalsAreOpen() {
5149
return this.modalCount > 0
52-
},
53-
modalTargetName() {
54-
return modalTargetName
5550
}
5651
},
5752
watch: {
@@ -81,10 +76,6 @@ const ModalManager = Vue.extend({
8176
methods: {
8277
// Public methods
8378
registerModal(modal) {
84-
// Make sure the modal target exists
85-
if (!modal.static) {
86-
this.ensureTarget(modal)
87-
}
8879
// Register the modal if not already registered
8980
if (modal && this.modals.indexOf(modal) === -1) {
9081
// Add modal to modals array
@@ -129,27 +120,6 @@ const ModalManager = Vue.extend({
129120
return this.scrollbarWidth || 0
130121
},
131122
// Private methods
132-
ensureTarget(modal) {
133-
if (isBrowser && !Wormhole.hasTarget(this.modalTargetName)) {
134-
const div = document.createElement('div')
135-
document.body.appendChild(div)
136-
const target = new BModalTarget({
137-
// Set parent/root to the modal's $root
138-
parent: modal.$root
139-
})
140-
target.$mount(div)
141-
target.$once('hook:beforeDestroy', () => {
142-
this.modals.forEach(modal => {
143-
// Hide any modals that may be in the target, if
144-
// target is destroyed, using the 'FORCE' trigger
145-
// which makes the hide event non-cancelable
146-
if (!modal.static) {
147-
modal.hide('FORCED')
148-
}
149-
})
150-
})
151-
}
152-
},
153123
updateModals(modals) {
154124
const baseZIndex = this.getBaseZIndex()
155125
const scrollbarWidth = this.getScrollbarWidth()

‎src/components/modal/helpers/modal-target.js

-58
This file was deleted.

‎src/components/modal/modal.js

+8-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Vue from '../../utils/vue'
2-
import { Portal } from 'portal-vue'
32
import modalManager from './helpers/modal-manager'
43
import BvModalEvent from './helpers/bv-modal-event.class'
54
import BButton from '../button/button'
@@ -8,8 +7,9 @@ import idMixin from '../../mixins/id'
87
import listenOnRootMixin from '../../mixins/listen-on-root'
98
import normalizeSlotMixin from '../../mixins/normalize-slot'
109
import BVTransition from '../../utils/bv-transition'
11-
import observeDom from '../../utils/observe-dom'
1210
import KeyCodes from '../../utils/key-codes'
11+
import observeDom from '../../utils/observe-dom'
12+
import { BTransporterSingle } from '../../utils/transporter'
1313
import { isBrowser } from '../../utils/env'
1414
import { isString } from '../../utils/inspect'
1515
import { getComponentConfig } from '../../utils/config'
@@ -543,6 +543,7 @@ export default Vue.extend({
543543
this.returnFocusTo()
544544
this.is_closing = false
545545
this.return_focus = null
546+
modalManager.unregisterModal(this)
546547
// TODO: Need to find a way to pass the `trigger` property
547548
// to the `hidden` event, not just only the `hide` event
548549
const hiddenEvt = new BvModalEvent('hidden', {
@@ -553,7 +554,6 @@ export default Vue.extend({
553554
componentId: this.safeId()
554555
})
555556
this.emitEvent(hiddenEvt)
556-
modalManager.unregisterModal(this)
557557
})
558558
},
559559
// Event emitter
@@ -911,18 +911,10 @@ export default Vue.extend({
911911
}
912912
},
913913
render(h) {
914-
// Wrap in a portal
915-
return h(
916-
Portal,
917-
{
918-
props: {
919-
name: `b-modal-${this._uid}`,
920-
to: modalManager.modalTargetName,
921-
slim: true,
922-
disabled: this.static
923-
}
924-
},
925-
[!this.is_hidden || (this.static && !this.lazy) ? this.makeModal(h) : h(false)]
926-
)
914+
if (this.static) {
915+
return this.lazy && this.is_hidden ? h(false) : this.makeModal(h)
916+
} else {
917+
return this.is_hidden ? h(false) : h(BTransporterSingle, {}, [this.makeModal(h)])
918+
}
927919
}
928920
})

‎src/components/modal/modal.spec.js

+16-22
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ describe('modal', () => {
160160
wrapper.destroy()
161161
})
162162

163-
it('renders in modal target when initially open and not static', async () => {
163+
it('renders appended to body when initially open and not static', async () => {
164164
const wrapper = mount(BModal, {
165165
attachToDocument: true,
166166
stubs: {
@@ -180,33 +180,33 @@ describe('modal', () => {
180180
await waitRAF()
181181
await waitNT(wrapper.vm)
182182
await waitRAF()
183+
await waitNT(wrapper.vm)
184+
await waitRAF()
183185

184186
expect(wrapper.isEmpty()).toBe(true)
185187
expect(wrapper.element.nodeType).toEqual(Node.COMMENT_NODE)
186188

187-
let modal = document.getElementById('testtarget')
188-
expect(modal).toBeDefined()
189-
expect(modal).not.toBe(null)
190-
191-
const target = document.querySelector('.b-modal-target')
192-
expect(target).toBeDefined()
193-
expect(target).not.toBe(null)
189+
let outer = document.getElementById('testtarget___BV_modal_outer_')
190+
expect(outer).toBeDefined()
191+
expect(outer).not.toBe(null)
194192

195-
expect(target.__vue__).toBeDefined() // Portal
196-
expect(target.__vue__.$parent).toBeDefined() // BModalTarget
197-
expect(target.__vue__.$parent.$options.name).toBe('BModalTarget')
193+
expect(outer.__vue__).toBeDefined() // Target
194+
expect(outer.__vue__.$options.name).toBe('BTransporterTargetSingle')
195+
expect(outer.parentElement).toBeDefined()
196+
expect(outer.parentElement).toBe(document.body)
198197

199-
// Make sure target is not in document anymore
200-
target.__vue__.$parent.$destroy()
198+
// Destroy modal
199+
wrapper.destroy()
201200

202201
await waitNT(wrapper.vm)
203202
await waitRAF()
204203
await waitNT(wrapper.vm)
205204
await waitRAF()
205+
await waitNT(wrapper.vm)
206+
await waitRAF()
206207

207-
expect(document.querySelector('.b-modal-target')).toBe(null)
208-
209-
wrapper.destroy()
208+
// Should no longer be in document.
209+
expect(outer.parentElement).toEqual(null)
210210
})
211211

212212
it('has expected structure when closed after being initially open', async () => {
@@ -261,12 +261,6 @@ describe('modal', () => {
261261
await waitNT(wrapper.vm)
262262
await waitRAF()
263263

264-
// expect(body._marginChangedForModal).toBe(null)
265-
// expect(body._paddingChangedForModal).toBe(null)
266-
// expect(body.classList.contains('modal-open')).toBe(false)
267-
// expect(body.hasAttribute('data-modal-open-count')).toBe(true)
268-
// expect(body.getAttribute('data-modal-open-count')).toEqual('0')
269-
270264
expect($modal.attributes('aria-hidden')).toBeDefined()
271265
expect($modal.attributes('aria-hidden')).toEqual('true')
272266
expect($modal.attributes('aria-modal')).not.toBeDefined()

0 commit comments

Comments
 (0)