fix(Modal): fix bug where closing modal removed wrong modal-open string in class (#410)

markogresak · eddywashere · commit 22d5c3f9e81b · 2017-05-14T16:31:09.000-07:00
Example:
initial body class: `no-modal-opened`
open and close modal, body class: `no-ed modal-open`
diff --git a/src/Modal.js b/src/Modal.js
@@ -151,7 +151,8 @@ class Modal extends React.Component {
       this._element = null;
     }
 
-    const classes = document.body.className.replace('modal-open', '');
+    // Use regex to prevent matching `modal-open` as part of a different class, e.g. `my-modal-opened`
+    const classes = document.body.className.replace(/(^| )modal-open( |$)/, ' ');
     document.body.className = mapToCssModules(classNames(classes).trim(), this.props.cssModule);
     setScrollbarWidth(this.originalBodyPadding);
   }
diff --git a/src/__tests__/Modal.spec.js b/src/__tests__/Modal.spec.js
@@ -565,4 +565,47 @@ describe('Modal', () => {
     expect(document.getElementsByClassName('modal-dialog').length).toBe(0);
     expect(document.body.className).toBe('');
   });
+
+  it('should remove exactly modal-open class from body', () => {
+    // set a body class which includes modal-open
+    document.body.className = 'my-modal-opened';
+
+    const wrapper = mount(
+      <Modal isOpen={isOpen} toggle={toggle}>
+        Yo!
+      </Modal>
+    );
+
+    // assert that the modal is closed and the body class is what was set initially
+    jasmine.clock().tick(300);
+    expect(isOpen).toBe(false);
+    expect(document.body.className).toBe('my-modal-opened');
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+
+    // assert that the modal is open and the body class is what was set initially + modal-open
+    jasmine.clock().tick(300);
+    expect(isOpen).toBe(true);
+    expect(document.body.className).toBe('my-modal-opened modal-open');
+
+    // append another body class which includes modal-open
+    // using this to test if replace will leave a space when removing modal-open
+    document.body.className += ' modal-opened';
+    expect(document.body.className).toBe('my-modal-opened modal-open modal-opened');
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+
+    // assert that the modal is closed and the body class is what was set initially
+    jasmine.clock().tick(300);
+    expect(isOpen).toBe(false);
+    expect(document.body.className).toBe('my-modal-opened modal-opened');
+
+    wrapper.unmount();
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -151,7 +151,8 @@ class Modal extends React.Component {`
`151`	`151`	`this._element = null;`
`152`	`152`	`}`
`153`	`153`
`154`		`- const classes = document.body.className.replace('modal-open', '');`
	`154`	+ // Use regex to prevent matching `modal-open` as part of a different class, e.g. `my-modal-opened`
	`155`	`+ const classes = document.body.className.replace(/(^\| )modal-open( \|$)/, ' ');`
`155`	`156`	`document.body.className = mapToCssModules(classNames(classes).trim(), this.props.cssModule);`
`156`	`157`	`setScrollbarWidth(this.originalBodyPadding);`
`157`	`158`	`}`