tweak Modal

resources/assets/src/components/Modal.tsx

@@ -46,6 +46,23 @@ const Modal: React.FC<ModalOptions & Props> = props => {
   const [validatorMessage, setValidatorMessage] = useState('')
   const ref = useRef<HTMLDivElement>(null)
 
+  const { show } = props
+
+  useEffect(() => {
+    if (!show) {
+      return
+    }
+
+    const onHidden = () => props.onClose?.()
+
+    const el = $(ref.current!)
+    el.on('hidden.bs.modal', onHidden)
+
+    return () => {
+      el.off('hidden.bs.modal', onHidden)
+    }
+  }, [show, props.onClose])
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value)
   }
@@ -82,39 +99,17 @@ const Modal: React.FC<ModalOptions & Props> = props => {
   }
 
   useEffect(() => {
-    if (!props.show) {
-      return
-    }
-
-    const onHidden = () => props.onClose?.()
-
-    const el = $(ref.current!)
-    el.on('hidden.bs.modal', onHidden)
-
-    return () => {
-      el.off('hidden.bs.modal', onHidden)
-    }
-  }, [props.onClose, props.show])
-
-  useEffect(() => {
-    if (props.show) {
+    if (show) {
       setTimeout(() => $(ref.current!).modal('show'), 50)
     }
-  }, [props.show])
+  }, [show])
 
-  if (!props.show) {
+  if (!show) {
     return null
   }
 
   return (
-    <div
-      id={props.id}
-      className="modal fade"
-      tabIndex={-1}
-      role="dialog"
-      aria-hidden={!props.show}
-      ref={ref}
-    >
+    <div id={props.id} className="modal fade" role="dialog" ref={ref}>
       <div
         className={`modal-dialog ${
           props.center ? 'modal-dialog-centered' : ''
@@ -159,8 +154,6 @@ const Modal: React.FC<ModalOptions & Props> = props => {
   )
 }
 
-Modal.displayName = 'Modal'
-
 Modal.defaultProps = {
   mode: 'confirm',
   title: trans('general.tip'),

resources/assets/tests/components/Modal.test.tsx

@@ -27,11 +27,13 @@ test('background color', () => {
 test('jQuery events', () => {
   const { getByText } = render(<Modal mode="confirm" show />)
   act(() => {
+    jest.runAllTimers()
     $('.modal').trigger('hidden.bs.modal')
   })
 
   fireEvent.click(getByText(trans('general.cancel')))
   act(() => {
+    jest.runAllTimers()
     $('.modal').trigger('hidden.bs.modal')
   })
 })
@@ -275,8 +277,6 @@ describe('"onClose" event', () => {
     const mock = jest.fn()
     const { getByText } = render(<Modal show mode="confirm" onClose={mock} />)
     fireEvent.click(getByText(trans('general.confirm')))
-    jest.runAllTimers()
-    $('.modal').trigger('hidden.bs.modal')
     expect(mock).toBeCalled()
   })
 
@@ -284,8 +284,6 @@ describe('"onClose" event', () => {
     const mock = jest.fn()
     const { getByText } = render(<Modal show mode="confirm" onClose={mock} />)
     fireEvent.click(getByText(trans('general.cancel')))
-    jest.runAllTimers()
-    $('.modal').trigger('hidden.bs.modal')
     expect(mock).toBeCalled()
   })
 })