fix(Modal|Portal): fix an error with unsafe setState() (#4259)

Author: layershifter

src/addons/Portal/Portal.js

@@ -196,8 +196,8 @@ class Portal extends Component {
   close = (e) => {
     debug('close()')
 
-    _.invoke(this.props, 'onClose', e, { ...this.props, open: false })
     this.setState({ open: false })
+    _.invoke(this.props, 'onClose', e, { ...this.props, open: false })
   }
 
   closeWithTimeout = (e, delay) => {

src/modules/Modal/Modal.js

@@ -59,8 +59,8 @@ class Modal extends Component {
   handleClose = (e) => {
     debug('close()')
 
-    _.invoke(this.props, 'onClose', e, { ...this.props, open: false })
     this.setState({ open: false })
+    _.invoke(this.props, 'onClose', e, { ...this.props, open: false })
   }
 
   handleDocumentMouseDown = (e) => {
@@ -80,8 +80,8 @@ class Modal extends Component {
     )
       return
 
-    _.invoke(this.props, 'onClose', e, { ...this.props, open: false })
     this.setState({ open: false })
+    _.invoke(this.props, 'onClose', e, { ...this.props, open: false })
   }
 
   handleIconOverrides = (predefinedProps) => ({

test/specs/modules/Modal/Modal-test.js

@@ -421,6 +421,25 @@ describe('Modal', () => {
       domEvent.click(document.body)
       onClose.should.not.have.been.called()
     })
+
+    it('handles unmount without errors', () => {
+      function ControlledExample() {
+        const [open, setState] = React.useState(true)
+
+        return (
+          <>
+            {open && <Modal open onClose={() => setState(false)} />}
+            <button id='close-button' />
+          </>
+        )
+      }
+
+      wrapperMount(<ControlledExample />)
+      assertBodyContains('.ui.modal')
+
+      domEvent.keyDown(document, { key: 'Escape' })
+      assertBodyContains('.ui.modal', false)
+    })
   })
 
   describe('closeOnEscape', () => {