From c747c247ae22bf09dd4188719a3bfa7ce1c644c0 Mon Sep 17 00:00:00 2001
From: Yassien <11986226+YassienW@users.noreply.github.com>
Date: Sun, 14 Jul 2019 18:47:43 +0200
Subject: [PATCH] [added] Added an id prop, applied to the modal dialog
 (content) (#765)

* Added an ID prop, applied to the modal dialog.
---
 docs/README.md                | 4 ++++
 specs/Modal.spec.js           | 7 +++++++
 src/components/ModalPortal.js | 4 +++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/docs/README.md b/docs/README.md
index 96ae2b68..bd74a76a 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -63,6 +63,10 @@ import ReactModal from 'react-modal';
      See the `Styles` section for more details.
   */
   overlayClassName="ReactModal__Overlay"
+   /*
+     String id to be applied to the content div
+   */
+  id=""
   /*
      String className to be applied to the modal content.
      See the `Styles` section for more details.
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
index 87e2613c..2600e608 100644
--- a/specs/Modal.spec.js
+++ b/specs/Modal.spec.js
@@ -233,6 +233,13 @@ export default () => {
     });
   });
 
+  it("supports id prop", () => {
+    const modal = renderModal({ isOpen: true, id: "id" });
+    mcontent(modal)
+      .id.includes("id")
+      .should.be.ok();
+  });
+
   it("supports portalClassName", () => {
     const modal = renderModal({
       isOpen: true,
diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
index 371da3bf..5384ad6c 100644
--- a/src/components/ModalPortal.js
+++ b/src/components/ModalPortal.js
@@ -57,6 +57,7 @@ export default class ModalPortal extends Component {
     shouldCloseOnEsc: PropTypes.bool,
     overlayRef: PropTypes.func,
     contentRef: PropTypes.func,
+    id: PropTypes.string,
     testId: PropTypes.string
   };
 
@@ -328,7 +329,7 @@ export default class ModalPortal extends Component {
     }, {});
 
   render() {
-    const { className, overlayClassName, defaultStyles } = this.props;
+    const { id, className, overlayClassName, defaultStyles } = this.props;
     const contentStyles = className ? {} : defaultStyles.content;
     const overlayStyles = overlayClassName ? {} : defaultStyles.overlay;
 
@@ -341,6 +342,7 @@ export default class ModalPortal extends Component {
         onMouseDown={this.handleOverlayOnMouseDown}
       >
         <div
+          id={id}
           ref={this.setContentRef}
           style={{ ...contentStyles, ...this.props.style.content }}
           className={this.buildClassName("content", className)}