buttons plugin : avoid multiple change event trigger (#31000)

- add unit test to count how many events are thrown when widget contains multiple tags inside label
- add a parameter to toggle, if click event is provided onto an input then don't trigger another change event already thrown by the browser
- simplify the case where toggle interface is called click provide from input itself OR it's a button without label. If label is present, then browser propagate click event from childrens through label and then cause multiple calls to toggle
- the test assumes that `.btn` class is always set onto the label if there's one, otherwise need to update this plugin and look for label around the input

Test with keyboard, mouse and js click call

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

1 files changed, 9 insertions, 4 deletions

diff --git a/js/src/button.js b/js/src/button.js
index d793785829..c95013a98c 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -46,6 +46,7 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
 class Button {
   constructor(element) {
     this._element = element
+    this.shouldAvoidTriggerChange = false
   }
 
   // Getters
@@ -83,7 +84,9 @@ class Button {
             input.checked = !this._element.classList.contains(CLASS_NAME_ACTIVE)
           }
 
-          $(input).trigger('change')
+          if (!this.shouldAvoidTriggerChange) {
+            $(input).trigger('change')
+          }
         }
 
         input.focus()
@@ -109,7 +112,7 @@ class Button {
 
   // Static
 
-  static _jQueryInterface(config) {
+  static _jQueryInterface(config, avoidTriggerChange) {
     return this.each(function () {
       const $element = $(this)
       let data = $element.data(DATA_KEY)
@@ -119,6 +122,8 @@ class Button {
         $element.data(DATA_KEY, data)
       }
 
+      data.shouldAvoidTriggerChange = avoidTriggerChange
+
       if (config === 'toggle') {
         data[config]()
       }
@@ -151,8 +156,8 @@ $(document)
         return
       }
 
-      if (initialButton.tagName !== 'LABEL' || inputBtn && inputBtn.type !== 'checkbox') {
-        Button._jQueryInterface.call($(button), 'toggle')
+      if (initialButton.tagName === 'INPUT' || button.tagName !== 'LABEL') {
+        Button._jQueryInterface.call($(button), 'toggle', initialButton.tagName === 'INPUT')
       }
     }
   })