Make escapeDeactivates, clickOutsideDeactivates as configurable props
manojvignesh opened this issue · 5 comments
Currently showing any interactable model above the bottomsheet will not accept any click inputs.
It's a big drawback considering we have scenarios which shows error popup on the screen.
After some analysis it looks like it's because of the focus trap. Please make it configurable
hmm i got this issue also when showing Modal, it wont click anything inside the modal
This would be useful. As a workaround I listen to onMouseUp event in the modal instead of onClick (that gets prevented).
I also face this issue. Any solutions?
add hidden input and combine it with focus trap in your modal, it will force the focus to the other modal & unfocus the bottom sheet, maybe not the best solution but it work for me for now.
import React from "react";
import 'react-responsive-modal/styles.css';
import "./Modal.scss"
import { Modal as ModalReact } from 'react-responsive-modal';
import FocusTrap from "focus-trap-react";
// FOCUS TRAP IS REQUIRED BECAUSE REACT-SPRING-BOTTOM-SHEET trapping active focus so modal wont be clickable
// Dont remove the fake-input, without it any onclick inside modal wont be clickable
function Modal({ children, open, onClose }) {
return <ModalReact open={open} onClose={onClose} center blockScroll showCloseIcon={false} animationDuration={0} >
<FocusTrap focusTrapOptions={{ onDeactivate: onClose }} active={open} >
<div className="modal-custom-overlay" onClick={onClose}>
<div onClick={e => e.stopPropagation()} className="relative">
{children}
</div>
<a href="#" className="fake-input">with</a>
</div>
</FocusTrap>
</ModalReact>
}
export default Modal;
What about set initialFocusRef
to false
?
It works for me.
PR related: #138