React-Bootstrap Modals cause problems for window EventListener

Question

I have built a React app which uses React-Bootstrap Modals.

In my return() function I have button which onClick changes state and shows/hides a div element.

const [showInfo, setShowInfo] = useState(false);
 
const toggleInfo = React.useCallback(() => {
  setShowInfo(!showInfo);
}, [showInfo]);

useEffect(() => {
  if (showInfo) {
    document.addEventListener("click", toggleInfo);
    return () => {
      document.removeEventListener("click", toggleInfo);
    };
  }
}, [showInfo, toggleInfo]);

return (

...

<Button onClick={() => toggleInfo()}>

...
)

After loading the page, pressing the button changes the state and the div element is shown/hidden depending on the state. If I click anywhere on the window it hides the div element.

Everything works fine until I open any Modal dialog.

After that, when I click my button that shows/hides div the document.addEventListener("click", toggleInfo) and document.removeEventListener("click", toggleInfo) execute immediately one after the other and the div element does not get displayed.

If I reload the page, it works again and I made sure that this problem occurs only after opening the Modal dialog.

Any help or tips would be greatly appreciated

score 0 · Answer 1 · answered Sep 26 '21 at 15:03

Fixed the issue by adding e.stopPropagation() to the toggleInfo() function:

const toggleInfo = React.useCallback(
    (e) => {
      e.stopPropagation();
      setShowInfo(!showInfo);
    },
    [showInfo]
  );

return (

...

<Button onClick={(e) => toggleInfo(e)}>

...
)

React-Bootstrap Modals cause problems for window EventListener

1 Answers1