diff options
| author | Ryan Weaver <ryan@thatsquality.com> | 2021-05-31 12:35:59 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-05-31 12:35:59 +0300 |
| commit | 0cb70e214ffd24070fa9e312746953faa0b8a305 (patch) | |
| tree | 0bc514423e0c217b3dd01ee0cbbb7b052b722c52 | |
| parent | e818c7cd5ddafdf68f627e5e3547bdd281bc5a5b (diff) | |
Changing Backdrop rootElement to default to a string (#34092)
The current config can cause the "body" to become stale. Specifically,
if the entire body element is swapped out for a new body element, then
the backdrop will continue to append itself to the original body element,
since it's stored in memory as a reference on this object.
This also no longer allows an explicit null to be passed to Backdrop's rootElement
This still accomplishes the laziness of "not finding the rootElement
until the Backdrop is created" to avoid problems of the JavaScript
being included inside <head> (so, before body is available).
| -rw-r--r-- | js/src/util/backdrop.js | 9 | ||||
| -rw-r--r-- | js/tests/unit/util/backdrop.spec.js | 4 |
2 files changed, 7 insertions, 6 deletions
diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js index f7990f7019..07ad20fab7 100644 --- a/js/src/util/backdrop.js +++ b/js/src/util/backdrop.js @@ -6,19 +6,19 @@ */ import EventHandler from '../dom/event-handler' -import { emulateTransitionEnd, execute, getTransitionDurationFromElement, reflow, typeCheckConfig } from './index' +import { emulateTransitionEnd, execute, getElement, getTransitionDurationFromElement, reflow, typeCheckConfig } from './index' const Default = { isVisible: true, // if false, we use the backdrop helper without adding any element to the dom isAnimated: false, - rootElement: document.body, // give the choice to place backdrop under different elements + rootElement: 'body', // give the choice to place backdrop under different elements clickCallback: null } const DefaultType = { isVisible: 'boolean', isAnimated: 'boolean', - rootElement: 'element', + rootElement: '(element|string)', clickCallback: '(function|null)' } const NAME = 'backdrop' @@ -90,7 +90,8 @@ class Backdrop { ...(typeof config === 'object' ? config : {}) } - config.rootElement = config.rootElement || document.body + // use getElement() with the default "body" to get a fresh Element on each instantiation + config.rootElement = getElement(config.rootElement) typeCheckConfig(NAME, config, DefaultType) return config } diff --git a/js/tests/unit/util/backdrop.spec.js b/js/tests/unit/util/backdrop.spec.js index 195d5067c2..3150ba14db 100644 --- a/js/tests/unit/util/backdrop.spec.js +++ b/js/tests/unit/util/backdrop.spec.js @@ -243,10 +243,10 @@ describe('Backdrop', () => { }) }) - it('Should default parent element to "document.body" when config value is null', done => { + it('Should find the rootElement if passed as a string', done => { const instance = new Backdrop({ isVisible: true, - rootElement: null + rootElement: 'body' }) const getElement = () => document.querySelector(CLASS_BACKDROP) instance.show(() => { |