Use _jQueryInterface for Dropdown to call toggle method

1 files changed, 26 insertions, 28 deletions

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 1da2098ddf..39a4a86ca4 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -114,51 +114,43 @@ const Dropdown = (($) => {
       return DefaultType
     }
 
-
     // public
 
     toggle() {
-      let context = $(this).data(DATA_KEY)
-      if (!context) {
-        context = new Dropdown(this)
-        $(this).data(DATA_KEY, context)
-      }
-
-      if (context.disabled || $(this).hasClass(ClassName.DISABLED)) {
-        return false
+      if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED)) {
+        return
       }
 
-      const parent   = Dropdown._getParentFromElement(this)
-      const isActive = $(context._menu).hasClass(ClassName.SHOW)
+      const parent   = Dropdown._getParentFromElement(this._element)
+      const isActive = $(this._menu).hasClass(ClassName.SHOW)
 
       Dropdown._clearMenus()
 
       if (isActive) {
-        return false
+        return
       }
 
       const relatedTarget = {
-        relatedTarget : this
+        relatedTarget : this._element
       }
       const showEvent = $.Event(Event.SHOW, relatedTarget)
 
       $(parent).trigger(showEvent)
 
       if (showEvent.isDefaultPrevented()) {
-        return false
+        return
       }
 
       // Handle dropup
-      const dropdownPlacement = $(this).parent().hasClass('dropup') ? AttachmentMap.TOP : context._config.placement
-      this._popper = new Popper(this, context._menu, {
+      const dropdownPlacement = $(this._element).parent().hasClass('dropup') ? AttachmentMap.TOP : this._config.placement
+      this._popper = new Popper(this._element, this._menu, {
         placement : dropdownPlacement,
         modifiers : {
           offset : {
-            offset : context._config.offset
+            offset : this._config.offset
           },
           flip : {
-            enabled : context._config.flip,
-            behavior : [AttachmentMap.TOP, AttachmentMap.BOTTOM]
+            enabled : this._config.flip
           }
         }
       })
@@ -172,15 +164,13 @@ const Dropdown = (($) => {
         $('body').children().on('mouseover', null, $.noop)
       }
 
-      this.focus()
-      this.setAttribute('aria-expanded', true)
+      this._element.focus()
+      this._element.setAttribute('aria-expanded', true)
 
-      $(context._menu).toggleClass(ClassName.SHOW)
+      $(this._menu).toggleClass(ClassName.SHOW)
       $(parent)
         .toggleClass(ClassName.SHOW)
         .trigger($.Event(Event.SHOWN, relatedTarget))
-
-      return false
     }
 
     dispose() {
@@ -203,7 +193,11 @@ const Dropdown = (($) => {
     // private
 
     _addEventListeners() {
-      $(this._element).on(Event.CLICK, this.toggle)
+      $(this._element).on(Event.CLICK, (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        this.toggle()
+      })
     }
 
     _getConfig(config) {
@@ -252,7 +246,7 @@ const Dropdown = (($) => {
           if (data[config] === undefined) {
             throw new Error(`No method named "${config}"`)
           }
-          data[config].call(this)
+          data[config]()
         }
       })
     }
@@ -266,7 +260,7 @@ const Dropdown = (($) => {
       const toggles = $.makeArray($(Selector.DATA_TOGGLE))
       for (let i = 0; i < toggles.length; i++) {
         const parent        = Dropdown._getParentFromElement(toggles[i])
-        const context         = $(toggles[i]).data(DATA_KEY)
+        const context       = $(toggles[i]).data(DATA_KEY)
         const relatedTarget = {
           relatedTarget : toggles[i]
         }
@@ -382,7 +376,11 @@ const Dropdown = (($) => {
     .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE,  Dropdown._dataApiKeydownHandler)
     .on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler)
     .on(`${Event.CLICK_DATA_API} ${Event.KEYUP_DATA_API}`, Dropdown._clearMenus)
-    .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle)
+    .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
+      event.preventDefault()
+      event.stopPropagation()
+      Dropdown._jQueryInterface.call($(this), 'toggle')
+    })
     .on(Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => {
       e.stopPropagation()
     })