fix(modals): create only one modal backdrop

Author: assisrafael

src/dialog/Dialog.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { ModalPortal } from './ModalPortal';
 import { Modal } from './Modal';

src/dialog/Modal.jsx

@@ -96,15 +96,21 @@ Modal.propTypes = {
 function hideModal(modalRef) {
   const body = document.querySelector('body');
 
-  body.classList.remove('modal-open');
   modalRef.current.style.display = 'none';
   modalRef.current.classList.remove('show');
+
+  if (getModals().length === 0) {
+    hideModalBackdrop();
+    body.classList.remove('modal-open');
+  }
 }
 
 function showModal(modalRef) {
   const body = document.querySelector('body');
 
   body.classList.add('modal-open');
+  showModalBackdrop();
+
   modalRef.current.style.display = 'block';
   modalRef.current.classList.add('show');
   modalRef.current.focus();
@@ -117,3 +123,36 @@ function renderObjectOrFunction(content, params) {
 
   return content;
 }
+
+function showModalBackdrop() {
+  const backdrop = getModalBackdrop();
+
+  backdrop.classList.remove('d-none');
+}
+
+function hideModalBackdrop() {
+  const backdrop = getModalBackdrop();
+
+  backdrop.classList.add('d-none');
+}
+
+function getModalBackdrop() {
+  const body = document.querySelector('body');
+  let backdrop = document.querySelector('.modal-backdrop');
+
+  if (!backdrop) {
+    backdrop = document.createElement('div');
+
+    backdrop.classList.add('modal-backdrop');
+    backdrop.classList.add('fade');
+    backdrop.classList.add('show');
+    backdrop.classList.add('d-none');
+    body.appendChild(backdrop);
+  }
+
+  return backdrop;
+}
+
+function getModals() {
+  return document.querySelectorAll('#modal-portals .modal.show');
+}

src/dialog/ModalPortal.jsx

@@ -31,13 +31,7 @@ export function ModalPortal({ children, title, isOpen }) {
     return '';
   }
 
-  return ReactDOM.createPortal(
-    <React.Fragment>
-      {children}
-      {isOpen && <div className="modal-backdrop fade show"></div>}
-    </React.Fragment>,
-    container
-  );
+  return ReactDOM.createPortal(children, container);
 }
 
 ModalPortal.propTypes = {
@@ -48,7 +42,7 @@ function getModalPortalsElem() {
   let modalPortalsElem = document.querySelector('#modal-portals');
 
   if (!modalPortalsElem) {
-    const body = document.getElementsByTagName('body')[0];
+    const body = document.querySelector('body');
 
     modalPortalsElem = document.createElement('div');
     modalPortalsElem.id = 'modal-portals';