fix showing to direct modal in a row

Author: yann300

libs/remix-ui/app/src/lib/remix-app/interface/index.ts

@@ -2,6 +2,7 @@ import { ModalTypes } from '../types'
 
 export interface AppModal {
     id: string
+    timestamp?: number
     hide?: boolean
     title: string
     // eslint-disable-next-line no-undef

libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts

@@ -5,8 +5,10 @@ import { AppModal, ModalState } from '../interface'
 export const modalReducer = (state: ModalState = ModalInitialState, action: ModalAction) => {
   switch (action.type) {
     case modalActionTypes.setModal: {
+      const timestamp = Date.now()
       const focusModal: AppModal = {
-        id: action.payload.id || Date.now().toString(),
+        timestamp,
+        id: action.payload.id || timestamp.toString(),
         hide: false,
         title: action.payload.title,
         message: action.payload.message,

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -20,9 +20,9 @@ export const ModalDialog = (props: ModalDialogProps) => {
   }
 
   useEffect(() => {
-    calledHideFunctionOnce.current = props.hide
+    calledHideFunctionOnce.current = false
     modal.current.focus()
-  }, [props.hide])
+  }, [props.timestamp])
 
   useEffect(() => {
     function handleBlur (e) {

libs/remix-ui/modal-dialog/src/lib/types/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-undef */
 export interface ModalDialogProps {
   id: string
+  timestamp?: number,
   title?: string,
   message?: string | JSX.Element,
   okLabel?: string,