Make escapeDeactivates, clickOutsideDeactivates as configurable props

[manojvignesh]

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

[squalvj]

hmm i got this issue also when showing Modal, it wont click anything inside the modal

[ioulian]

This would be useful. As a workaround I listen to onMouseUp event in the modal instead of onClick (that gets prevented).

[mard0n]

I also face this issue. Any solutions?

[squalvj]

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;

[helciofranco]

What about set initialFocusRef to false? It works for me.

PR related: https://github.com/stipsan/react-spring-bottom-sheet/pull/138