Allow offcanvas to be initialized in open state (#33382)

* Update docs to use new .show behavior and clarify some copy for first example

Co-authored-by: Mark Otto <[email protected]>
Co-authored-by: XhmikosR <[email protected]>

1 files changed, 8 insertions, 2 deletions

diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js
index 4b98565e2..1824b3e3b 100644
--- a/js/src/offcanvas.js
+++ b/js/src/offcanvas.js
@@ -31,6 +31,7 @@ const NAME = 'offcanvas'
 const DATA_KEY = 'bs.offcanvas'
 const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
 const ESCAPE_KEY = 'Escape'
 
 const Default = {
@@ -48,7 +49,8 @@ const DefaultType = {
 const CLASS_NAME_BACKDROP_BODY = 'offcanvas-backdrop'
 const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_TOGGLING = 'offcanvas-toggling'
-const ACTIVE_SELECTOR = `.offcanvas.show, .${CLASS_NAME_TOGGLING}`
+const OPEN_SELECTOR = '.offcanvas.show'
+const ACTIVE_SELECTOR = `${OPEN_SELECTOR}, .${CLASS_NAME_TOGGLING}`
 
 const EVENT_SHOW = `show${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
@@ -72,7 +74,7 @@ class Offcanvas extends BaseComponent {
     super(element)
 
     this._config = this._getConfig(config)
-    this._isShown = element.classList.contains(CLASS_NAME_SHOW)
+    this._isShown = false
     this._addEventListeners()
   }
 
@@ -262,6 +264,10 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   data.toggle(this)
 })
 
+EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+  SelectorEngine.find(OPEN_SELECTOR).forEach(el => (Data.get(el, DATA_KEY) || new Offcanvas(el)).show())
+})
+
 /**
  * ------------------------------------------------------------------------
  * jQuery