fix(modal): fix wrong launchingElement when user clicks on close button (#2423)

Author: Akira Sudoh

src/components/modal/modal.js

@@ -31,13 +31,19 @@ class Modal extends mixin(createComponent, initComponentByLauncher, eventedState
     this._hookCloseActions();
   }
 
-  // when .init() is called from initComponentByLauncher, run this method
+  /**
+   * A method that runs when `.init()` is called from `initComponentByLauncher`.
+   * @param {Event} evt The event fired on the launcher button.
+   */
   createdByLauncher(evt) {
     this.show(evt);
   }
 
-  // when .changeState() is called from eventedState, determine whether or
-  // not to emit events and callback function
+  /**
+   * Determines whether or not to emit events and callback function when `.changeState()` is called from `eventedState`.
+   * @param {string} state The new state.
+   * @returns {boolean} `true` if the given `state` is different from current state.
+   */
   shouldStateBeChanged(state) {
     if (state === 'shown') {
       return !this.element.classList.contains(this.options.classVisible);
@@ -97,6 +103,9 @@ class Modal extends mixin(createComponent, initComponentByLauncher, eventedState
   _hookCloseActions() {
     this.element.addEventListener('click', (evt) => {
       const closeButton = eventMatches(evt, this.options.selectorModalClose);
+      if (closeButton) {
+        evt.delegateTarget = closeButton; // eslint-disable-line no-param-reassign
+      }
       if (closeButton || evt.target === this.element) {
         this.hide(evt);
       }

tests/spec/modal_spec.js

@@ -109,7 +109,6 @@ describe('Test modal', function () {
       }).to.throw(Error);
     });
 
-
     it('Should have hide() not hide if not visible', function () {
       const spy = sinon.spy();
       events.on(element, 'modal-beinghidden', spy);
@@ -179,25 +178,67 @@ describe('Test modal', function () {
 
     it('Should handle the ESC key to close the modal', function () {
       element.classList.add('is-visible');
-      const spy = sinon.spy();
-      events.on(element, 'modal-beinghidden', spy);
+      const spyBeforeHidden = sinon.spy();
+      const spyAfterHidden = sinon.spy();
+      events.on(element, 'modal-beinghidden', spyBeforeHidden);
+      events.on(element, 'modal-hidden', spyAfterHidden);
       element.ownerDocument.body.dispatchEvent(Object.assign(new CustomEvent('keydown', { bubbles: true }), { which: 27 }));
+      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
       expect(element.classList.contains('is-visible')).to.be.false;
-      expect(spy).to.be.called;
+      expect(spyBeforeHidden).to.be.called;
+      expect(spyAfterHidden).to.be.called;
+      const eventDataBeforeHidden = spyBeforeHidden.firstCall.args[0].detail;
+      const eventDataAfterHidden = spyAfterHidden.firstCall.args[0].detail;
+      expect(eventDataBeforeHidden.launchingElement, 'Launching element for modal-beinghidden')
+        .to.equal(element.ownerDocument.body);
+      expect(eventDataBeforeHidden.launchingEvent.target, 'Launching event for modal-beinghidden')
+        .to.equal(element.ownerDocument.body);
+      expect(eventDataAfterHidden.launchingElement, 'Launching element for modal-hidden')
+        .to.equal(element.ownerDocument.body);
+      expect(eventDataAfterHidden.launchingEvent.target, 'Launching event for modal-hidden')
+        .to.equal(element.ownerDocument.body);
     });
 
     it('Should handle any elements with data-modal-close attribute to close the modal', function () {
       modal.show();
+      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      const spyBeforeHidden = sinon.spy();
+      const spyAfterHidden = sinon.spy();
+      events.on(modal.element, 'modal-beinghidden', spyBeforeHidden);
+      events.on(modal.element, 'modal-hidden', spyAfterHidden);
       const closeButton = element.querySelector('[data-modal-close]');
       closeButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(element.classList.contains('is-visible')).to.be.false;
+      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      expect(element.classList.contains('is-visible'), 'Visible state').to.be.false;
+      expect(spyBeforeHidden).to.have.been.called;
+      expect(spyAfterHidden).to.have.been.called;
+      const eventDataBeforeHidden = spyBeforeHidden.firstCall.args[0].detail;
+      const eventDataAfterHidden = spyAfterHidden.firstCall.args[0].detail;
+      expect(eventDataBeforeHidden.launchingElement, 'Launching element for modal-beinghidden').to.equal(closeButton);
+      expect(eventDataBeforeHidden.launchingEvent.target, 'Launching event for modal-beinghidden').to.equal(closeButton);
+      expect(eventDataAfterHidden.launchingElement, 'Launching element for modal-hidden').to.equal(closeButton);
+      expect(eventDataAfterHidden.launchingEvent.target, 'Launching event for modal-hidden').to.equal(closeButton);
     });
 
     it('Should handle any click outside the modal element to close the modal', function () {
       modal.show();
+      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
+      const spyBeforeHidden = sinon.spy();
+      const spyAfterHidden = sinon.spy();
+      events.on(modal.element, 'modal-beinghidden', spyBeforeHidden);
+      events.on(modal.element, 'modal-hidden', spyAfterHidden);
       const containerArea = document.querySelector('.bx--modal');
       containerArea.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      modal.element.dispatchEvent(new CustomEvent('transitionend', { bubbles: true }));
       expect(element.classList.contains('is-visible')).to.be.false;
+      expect(spyBeforeHidden).to.have.been.called;
+      expect(spyAfterHidden).to.have.been.called;
+      const eventDataBeforeHidden = spyBeforeHidden.firstCall.args[0].detail;
+      const eventDataAfterHidden = spyAfterHidden.firstCall.args[0].detail;
+      expect(eventDataBeforeHidden.launchingElement, 'Launching element for modal-beinghidden').to.equal(element);
+      expect(eventDataBeforeHidden.launchingEvent.target, 'Launching event for modal-beinghidden').to.equal(element);
+      expect(eventDataAfterHidden.launchingElement, 'Launching element for modal-hidden').to.equal(element);
+      expect(eventDataAfterHidden.launchingEvent.target, 'Launching event for modal-hidden').to.equal(element);
     });
 
     afterEach(function () {