Merge pull request #3874 from jmrieger/1412-handle-non-click-events-o…

…n-toggle

#1412 - bug - Fix HTML toggle to look at other triggers for click eve…

html/components/toggle.js

@@ -110,6 +110,13 @@ const bindToggleUIEvents = (element) => {
   // Add click event listener to trigger for each toggle collection we find
   toggleTrigger.addEventListener('click', (e) => {
     e.preventDefault();
+
+    // If we are in the middle of handling the previous toggle event,
+    // then we should ignore this event
+    if (e.currentTarget.style.pointerEvents === 'none') {
+      return;
+    }
+
     // Disable clicks till animation runs
     e.currentTarget.style.pointerEvents = 'none';
     handleToggleClick(

html/tests/toggle.tests.js

@@ -253,11 +253,39 @@ describe('Toggle tests', () => {
     ).toBe(true);
   });
 
-  it(`should not add Accordion__item class 
+  it(`should not add Accordion__item class
       if toggle is not an accordion`, () => {
     handleToggleClick(content, null, null, trigger);
     expect(container.classList.contains('sprk-c-Accordion__item--open')).toBe(
       false,
     );
   });
+
+  it('should ignore repeated clicks during animation', () => {
+    bindToggleUIEvents(container);
+
+    // the first click should open the toggle
+    trigger.dispatchEvent(new window.Event('click'));
+    expect(icon.classList).toContain('sprk-c-Icon--open');
+
+    // clicking it again immediately should not close the toggle
+    trigger.dispatchEvent(new window.Event('click'));
+    expect(icon.classList).toContain('sprk-c-Icon--open');
+  });
+
+  it('should allow repeated clicks after animation', (cb) => {
+    bindToggleUIEvents(container);
+    expect(icon.classList).not.toContain('sprk-c-Icon--open');
+
+    // the first click should open the toggle
+    trigger.dispatchEvent(new window.Event('click'));
+    expect(icon.classList).toContain('sprk-c-Icon--open');
+
+    setTimeout(() => {
+      // clicking it again after waiting should close the toggle
+      trigger.dispatchEvent(new window.Event('click'));
+      expect(icon.classList).not.toContain('sprk-c-Icon--open');
+      cb();
+    }, 100);
+  });
 });