From f22d67e482696f04f30058a0e13da2b341eedd7a Mon Sep 17 00:00:00 2001
From: HSU Rynki <Gernischt@gmail.com>
Date: Mon, 25 May 2020 11:03:36 +0800
Subject: [PATCH 1/3] fix(modal): set body hidden false on close modal

---
 components/modal/modal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/modal/modal.tsx b/components/modal/modal.tsx
index 612af0a..cdfbf45 100644
--- a/components/modal/modal.tsx
+++ b/components/modal/modal.tsx
@@ -47,6 +47,7 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
 
   const closeModal = () => {
     setVisible(false)
+    setBodyHidden(false)
     onClose && onClose()
   }
 

From b9fe67d14d21f6d71da0045939bea4dcf11c9c64 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Mon, 25 May 2020 12:47:34 +0800
Subject: [PATCH 2/3] fix(modal): fix close handler is triggered repeatedly

fix(modal): trigger callback before state update
---
 components/modal/modal.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/modal/modal.tsx b/components/modal/modal.tsx
index cdfbf45..d182ed2 100644
--- a/components/modal/modal.tsx
+++ b/components/modal/modal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { createPortal } from 'react-dom'
 import usePortal from '../utils/use-portal'
 import ModalTitle from './modal-title'
@@ -11,6 +11,7 @@ import Backdrop from '../shared/backdrop'
 import { ModalConfig, ModalContext } from './modal-context'
 import { pickChild } from '../utils/collections'
 import useBodyScroll from '../utils/use-body-scroll'
+import useCurrentState from '../utils/use-current-state'
 
 interface Props {
   disableBackdropClick?: boolean
@@ -41,26 +42,27 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
 }) => {
   const portal = usePortal('modal')
   const [, setBodyHidden] = useBodyScroll()
-  const [visible, setVisible] = useState<boolean>(false)
+  const [visible, setVisible, visibleRef] = useCurrentState<boolean>(false)
   const [withoutActionsChildren, ActionsChildren] = pickChild(children, ModalAction)
   const hasActions = ActionsChildren && React.Children.count(ActionsChildren) > 0
 
   const closeModal = () => {
+    onClose && onClose()
     setVisible(false)
     setBodyHidden(false)
-    onClose && onClose()
   }
 
   useEffect(() => {
     if (open === undefined) return
-    setVisible(open)
-    setBodyHidden(open)
-
     if (open) {
       onOpen && onOpen()
-    } else {
+    }
+    if (!open && visibleRef.current) {
       onClose && onClose()
     }
+
+    setVisible(open)
+    setBodyHidden(open)
   }, [open])
 
   const closeFromBackdrop = () => {

From a9fa800939cc5ad2a69888c3f3a00df08cf9df52 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Mon, 25 May 2020 12:54:39 +0800
Subject: [PATCH 3/3] docs(modal): add event handler for close button

---
 pages/en-us/components/modal.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/en-us/components/modal.mdx b/pages/en-us/components/modal.mdx
index 57fb9c2..4ee9d0d 100644
--- a/pages/en-us/components/modal.mdx
+++ b/pages/en-us/components/modal.mdx
@@ -38,7 +38,7 @@ Display popup content that requires attention or provides additional information
         <Modal.Content>
           <p>Some content contained within the modal.</p>
         </Modal.Content>
-        <Modal.Action passive>Cancel</Modal.Action>
+        <Modal.Action passive onClick={() => setState(false)}>Cancel</Modal.Action>
         <Modal.Action>Submit</Modal.Action>
       </Modal>
     </div>
@@ -63,7 +63,7 @@ Display popup content that requires attention or provides additional information
         <Modal.Content>
           <p>Some content contained within the modal.</p>
         </Modal.Content>
-        <Modal.Action passive>Cancel</Modal.Action>
+        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
         <Modal.Action>Submit</Modal.Action>
       </Modal>
     </>
@@ -119,7 +119,7 @@ Display popup content that requires attention or provides additional information
         <Modal.Content>
           <p>Some content contained within the modal.</p>
         </Modal.Content>
-        <Modal.Action passive>Cancel</Modal.Action>
+        <Modal.Action passive onClick={() => setState(false)}>Cancel</Modal.Action>
         <Modal.Action disabled>Submit</Modal.Action>
       </Modal>
     </>