Fix disappearing modal after tab switch

pull/1407/head
ioedeveloper 3 years ago
parent df7a142d20
commit b11b7adbfe
  1. 26
      libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@ -16,6 +16,24 @@ export const ModalDialog = (props: ModalDialogProps) => {
modal.current.focus()
}, [props.hide])
useEffect(() => {
function handleBlur (e) {
if (!e.currentTarget.contains(e.relatedTarget)) {
e.stopPropagation()
if (document.activeElement !== this) {
handleHide()
}
}
}
if (modal.current) {
modal.current.addEventListener('blur', handleBlur)
return () => {
modal.current.removeEventListener('blur', handleBlur)
}
}
}, [modal.current])
const modalKeyEvent = (keyCode) => {
if (keyCode === 27) { // Esc
if (props.cancelFn) props.cancelFn()
@ -40,13 +58,6 @@ export const ModalDialog = (props: ModalDialogProps) => {
handleHide()
}
const handleBlur = (e) => {
if (!e.currentTarget.contains(e.relatedTarget)) {
e.stopPropagation()
handleHide()
}
}
return (
<div
data-id={`${props.id}ModalDialogContainer-react`}
@ -58,7 +69,6 @@ export const ModalDialog = (props: ModalDialogProps) => {
>
<div className="modal-dialog" role="document">
<div
onBlur={handleBlur}
ref={modal}
tabIndex={-1}
className={'modal-content remixModalContent ' + (props.modalClass ? props.modalClass : '')}

Loading…
Cancel
Save