]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: e818c7c)
Changing Backdrop rootElement to default to a string (#34092)
authorRyan Weaver <ryan@thatsquality.com>
Mon, 31 May 2021 09:35:59 +0000 (05:35 -0400)
committerGitHub <noreply@github.com>
Mon, 31 May 2021 09:35:59 +0000 (12:35 +0300)
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).

js/src/util/backdrop.js patch | blob | blame | history
js/tests/unit/util/backdrop.spec.js patch | blob | blame | history

diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js
index f7990f701994b8f40ca84a606f55304111b9110b..07ad20fab7f4fd5c9dcb15820796c08866bae76f 100644 (file)
--- 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 195d5067c21c6503eee3d6e1130d094e6bdbd826..3150ba14dbee382cdb0c9a8f8822d089c5e23523 100644 (file)
--- 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(() => {
Mirror of https://github.com/twbs/bootstrap.git