Generate version 2.4.0

Author: Krzysztof Wilk

README.txt

@@ -1,6 +1,6 @@
 MDB 5 React
 
-Version: FREE 2.3.0
+Version: FREE 2.4.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/react/

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit-demo",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "index.js",
   "repository": {
     "type": "git",

app/src/components/Modal/Modal.tsx

@@ -23,6 +23,7 @@ const MDBModal: React.FC<ModalProps> = ({
   const [innerShow, setInnerShow] = useState(show);
   const [staticModal, setStaticModal] = useState(false);
   const [focusedElement, setFocusedElement] = useState(0);
+  const [focusableElements, setFocusableElements] = useState<any>([]);
 
   const modalInnerRef = useRef<HTMLElement>(null);
   const modalReference = modalRef ? modalRef : modalInnerRef;
@@ -90,10 +91,30 @@ const MDBModal: React.FC<ModalProps> = ({
   );
 
   useEffect(() => {
-    const focusableElements = modalReference.current?.querySelectorAll(
-      'button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    );
+    const focusable = modalReference.current?.querySelectorAll(
+      'button, a, input, select, textarea, [tabindex]'
+    ) as any as Array<HTMLElement>;
+
+    const filtered = Array.from(focusable)
+      .filter((el: any) => el.tabIndex !== -1)
+      .sort((a, b) => {
+        if (a.tabIndex === b.tabIndex) {
+          return 0;
+        }
+        if (b.tabIndex === null) {
+          return -1;
+        }
+        if (a.tabIndex === null) {
+          return 1;
+        }
+        return a.tabIndex - b.tabIndex;
+      });
 
+    setFocusableElements(filtered);
+    setFocusedElement(filtered.length - 1);
+  }, [modalReference]);
+
+  useEffect(() => {
     if (focusableElements && focusableElements.length > 0) {
       if (focusedElement === focusableElements.length) {
         (focusableElements[0] as HTMLElement).focus();
@@ -102,7 +123,7 @@ const MDBModal: React.FC<ModalProps> = ({
         (focusableElements[focusedElement] as HTMLElement).focus();
       }
     }
-  }, [focusedElement, modalReference]);
+  }, [focusedElement, focusableElements]);
 
   useEffect(() => {
     const getScrollbarWidth = () => {
@@ -122,6 +143,12 @@ const MDBModal: React.FC<ModalProps> = ({
       document.body.style.overflow = '';
       document.body.style.paddingRight = '';
     }
+
+    return () => {
+      document.body.classList.remove('modal-open');
+      document.body.style.overflow = '';
+      document.body.style.paddingRight = '';
+    };
   }, [innerShow]);
 
   useEffect(() => {

dist/mdb-react-ui-kit.esm.js

@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "./dist/mdb-react-ui-kit.js",
   "module": "./dist/mdb-react-ui-kit.esm.js",
   "types": "./dist/index.d.ts",
@@ -36,6 +36,7 @@
   ],
   "author": "MDBootstrap",
   "license": "SEE LICENSE IN <license.pdf>",
+  "homepage": "https://mdbootstrap.com/docs/b5/react/",
   "bugs": {
     "url": "https://github.com/mdbootstrap/mdb-react-ui-kit/issues"
   }