From e34481b6eb5c7b9db35911f428cb96af6947741e Mon Sep 17 00:00:00 2001
From: Rohit Sharma <rohit2sharma95@gmail.com>
Date: Thu, 14 Jan 2021 01:29:47 +0530
Subject: [PATCH] Fix toggling modal when clicking on `data-bs-toggle="modal"`
 (#32691)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 js/src/modal.js             |  2 +-
 js/tests/unit/modal.spec.js | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/js/src/modal.js b/js/src/modal.js
index 87c22943ad..fe1b5a4c65 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -590,7 +590,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
     data = new Modal(target, config)
   }
 
-  data.show(this)
+  data.toggle(this)
 })
 
 /**
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index f645e9892b..a867bec9b6 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -870,7 +870,7 @@ describe('Modal', () => {
   })
 
   describe('data-api', () => {
-    it('should open modal', done => {
+    it('should toggle modal', done => {
       fixtureEl.innerHTML = [
         '<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>',
         '<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'
@@ -885,6 +885,15 @@ describe('Modal', () => {
         expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
         expect(modalEl.style.display).toEqual('block')
         expect(document.querySelector('.modal-backdrop')).toBeDefined()
+        setTimeout(() => trigger.click(), 10)
+      })
+
+      modalEl.addEventListener('hidden.bs.modal', () => {
+        expect(modalEl.getAttribute('aria-modal')).toEqual(null)
+        expect(modalEl.getAttribute('role')).toEqual(null)
+        expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
+        expect(modalEl.style.display).toEqual('none')
+        expect(document.querySelector('.modal-backdrop')).toEqual(null)
         done()
       })