prevent blur

ethereum · Oct 3, 2024 · a5a9329 · a5a9329
1 parent 1dc1bb1
commit a5a9329
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 7 deletions.
diff --git a/libs/remix-ui/app/src/lib/remix-app/components/modals/matomo.tsx b/libs/remix-ui/app/src/lib/remix-app/components/modals/matomo.tsx
@@ -74,7 +74,8 @@ const MatomoDialog = (props: MatomoDialogProps) => {
         okLabel: <FormattedMessage id="remixApp.accept" />,
         okFn: handleModalOkClick,
         cancelLabel: <FormattedMessage id="remixApp.decline" />,
-        cancelFn: declineModal
+        cancelFn: declineModal,
+        preventBlur: true
       })
     }
     console.log('visible', visible)

diff --git a/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx b/libs/remix-ui/app/src/lib/remix-app/context/provider.tsx
@@ -23,7 +23,8 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
   }
 
   const modal = (modalData: AppModal) => {
-    const { id, title, message, validationFn, okLabel, okFn, cancelLabel, cancelFn, modalType, modalParentClass, defaultValue, hideFn, data } = modalData
+    const { id, title, message, validationFn, okLabel, okFn, cancelLabel, cancelFn, modalType, modalParentClass, defaultValue, hideFn, data, preventBlur } = modalData
+    console.log('modalData', modalData)
     return new Promise((resolve, reject) => {
       dispatch({
         type: modalActionTypes.setModal,
@@ -42,7 +43,8 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
           hideFn,
           resolve,
           next: onNextFn,
-          data
+          data,
+          preventBlur
         }
       })
     })

diff --git a/libs/remix-ui/app/src/lib/remix-app/interface/index.ts b/libs/remix-ui/app/src/lib/remix-app/interface/index.ts
@@ -24,7 +24,8 @@ export interface AppModal {
     hideFn?: () => void,
     resolve?: (value?:any) => void,
     next?: () => void,
-    data?: any
+    data?: any,
+    preventBlur?: boolean
 }
 
 export interface AlertModal {

diff --git a/libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts b/libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts
@@ -23,7 +23,8 @@ export const modalReducer = (state: ModalState = ModalInitialState, action: Moda
       hideFn: action.payload.hideFn,
       resolve: action.payload.resolve,
       next: action.payload.next,
-      data: action.payload.data
+      data: action.payload.data,
+      preventBlur: action.payload.preventBlur
     }
 
     const modalList: AppModal[] = state.modals.slice()

diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
@@ -15,6 +15,7 @@ declare global {
 const _paq = (window._paq = window._paq || [])
 
 export const ModalDialog = (props: ModalDialogProps) => {
+  console.log('ModalDialog', props)
   const [state, setState] = useState({
     toggleBtn: true
   })
@@ -33,7 +34,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
     calledHideFunctionOnce.current = props.hide
     modal.current.focus()
 
-    if (modal.current) {
+    if (modal.current && !props.preventBlur) {
       modal.current.removeEventListener('blur', handleBlur)
       modal.current.addEventListener('blur', handleBlur)
     }
@@ -45,6 +46,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
   function handleBlur(e) {
     _paq.push(['trackEvent', 'modal', 'blur', JSON.stringify(e), this.id, props.title, e.currentTarget, e.relatedTarget])
     console.log('handleBlur', e.currentTarget, e.relatedTarget, this)
+    console.trace()
     if (e.currentTarget && !e.currentTarget.contains(e.relatedTarget)) {
       e.stopPropagation()
       if (document.activeElement !== this) {

diff --git a/libs/remix-ui/modal-dialog/src/lib/types/index.ts b/libs/remix-ui/modal-dialog/src/lib/types/index.ts
@@ -28,5 +28,6 @@ export interface ModalDialogProps {
   next?: () => void,
   data?: any,
   okBtnClass?: string,
-  cancelBtnClass?: string
+  cancelBtnClass?: string,
+  preventBlur?: boolean
 }