Repository: react-materialize/react-materialize
Pull request #865 (2019-05-08 16:33:37)

fix: Modal correctly closes itself when unmounted
# Description

This __P.R__ is for #862.

I also took the occasion to move `id` to `defaultProps`, as in #861 

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

# How Has This Been Tested?

Tested it with #861 boilerplate.

# Checklist:

- [x] I have commented my code, particularly in hard-to-understand areas
- [x] My changes generate no new warnings
- [x] I have not generated a new package version. (the maintainers will handle that)



Patch:
diff --git a/src/Modal.js b/src/Modal.js
index f1e1922..074faf3 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -9,7 +9,6 @@ import Button from './Button';
 class Modal extends Component {
   constructor(props) {
     super(props);
-    this.modalID = props.id || `modal_${idgen()}`;
     this.showModal = this.showModal.bind(this);
     this.createRoot();
   }
@@ -33,6 +32,7 @@ class Modal extends Component {
     document.body.removeChild(this.modalRoot);
 
     if (this.instance) {
+      this.hideModal();
       this.instance.destroy();
     }
   }
@@ -49,6 +49,7 @@ class Modal extends Component {
 
   renderModalPortal() {
     const {
+      id,
       actions,
       bottomSheet,
       children,
@@ -74,12 +75,12 @@ class Modal extends Component {
       this.modalRoot &&
       ReactDOM.createPortal(
         <div
-          {...other}
+          id={id}
           className={classes}
-          id={this.modalID}
           ref={div => {
             this._modal = div;
           }}
+          {...other}
         >
           <div className="modal-content">
             <h4>{header}</h4>
@@ -209,6 +210,7 @@ Modal.propTypes = {
 };
 
 Modal.defaultProps = {
+  id: `modal-${idgen()}`,
   options: {
     opacity: 0.5,
     inDuration: 250,


Test patch:
diff --git a/test/__snapshots__/Modal.spec.js.snap b/test/__snapshots__/Modal.spec.js.snap
index a4dbb07..f8761d3 100644
--- a/test/__snapshots__/Modal.spec.js.snap
+++ b/test/__snapshots__/Modal.spec.js.snap
@@ -17,6 +17,7 @@ exports[`<Modal /> renders a modal has children 1`] = `
   bottomSheet={false}
   fixedFooter={false}
   header="Modal header"
+  id="modal-mockId"
   options={
     Object {
       "dismissible": true,
@@ -39,7 +40,7 @@ exports[`<Modal /> renders a modal has children 1`] = `
       <div>
         <div
           class="modal"
-          id="modal_mockId"
+          id="modal-mockId"
         >
           <div
             class="modal-content"
@@ -68,7 +69,7 @@ exports[`<Modal /> renders a modal has children 1`] = `
   >
     <div
       className="modal"
-      id="modal_mockId"
+      id="modal-mockId"
     >
       <div
         className="modal-content"
@@ -122,6 +123,7 @@ exports[`<Modal /> renders a trigger renders 1`] = `
   bottomSheet={false}
   fixedFooter={false}
   header="Modal header"
+  id="modal-mockId"
   options={
     Object {
       "dismissible": true,
@@ -144,7 +146,7 @@ exports[`<Modal /> renders a trigger renders 1`] = `
       <div>
         <div
           class="modal"
-          id="modal_mockId"
+          id="modal-mockId"
         >
           <div
             class="modal-content"
@@ -173,7 +175,7 @@ exports[`<Modal /> renders a trigger renders 1`] = `
   >
     <div
       className="modal"
-      id="modal_mockId"
+      id="modal-mockId"
     >
       <div
         className="modal-content"
@@ -226,6 +228,7 @@ exports[`<Modal /> without a trigger renders 1`] = `
   }
   bottomSheet={false}
   fixedFooter={false}
+  id="modal-mockId"
   options={
     Object {
       "dismissible": true,
@@ -238,7 +241,7 @@ exports[`<Modal /> without a trigger renders 1`] = `
       <div>
         <div
           class="modal"
-          id="modal_mockId"
+          id="modal-mockId"
         >
           <div
             class="modal-content"
@@ -265,7 +268,7 @@ exports[`<Modal /> without a trigger renders 1`] = `
   >
     <div
       className="modal"
-      id="modal_mockId"
+      id="modal-mockId"
     >
       <div
         className="modal-content"