[Question] React-leaflet does not let react-modal close on first click

[18anandn]

Bug report in v4

• [X] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [X] Using the latest version of React and ReactDOM v18.
• [X] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
• [X] Using the latest v4 version of React-Leaflet.
• [X] The issue has not already been reported.
• [X] Make sure you have followed the quick start guide for Leaflet.
• [X] Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

After clicking on the zoom button, modal closes when clicked on overlay on first click.

Actual behavior

After clicking on the zoom button, modal does not close when clicked on overlay on first click. It takes 2 clicks. It works as expected with every other interaction (like click inside modal content or map, scroll zoom).

Steps to reproduce

Dependencies: { "leaflet": "^1.9.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-leaflet": "^4.2.1", "react-modal": "^3.16.1" }

Code to reproduce: ` import { useState } from 'react'; import ReactModal from 'react-modal'; import { MapContainer } from 'react-leaflet/MapContainer'; import { TileLayer } from 'react-leaflet/TileLayer';

function App() { const [isOpenModal, setIsOpenModal] = useState(false);

const handleClick = () => { setIsOpenModal(true); };

return ( <>

Open React Leaflet

  <ReactModal
    isOpen={isOpenModal}
    onRequestClose={() => setIsOpenModal(false)}
    parentSelector={() => document.body}
  >
    <MapContainer
      center={[51.505, -0.09]}
      zoom={13}
      scrollWheelZoom={false}
      style={{
        height: '50dvh',
        width: '50dvw',
      }}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </MapContainer>
  </ReactModal>
</>

); }

export default App; `

[cowglow]

When you say the Zoom button, do you mean from the map controls? Because there isn't anything in your code snippet that would trigger that behavior. You might want to use the useMapEvent and listen for the end of the Zoom to trigger the stage change for the modal to close.

[18anandn]

When you say the Zoom button, do you mean from the map controls? Because there isn't anything in your code snippet that would trigger that behavior. You might want to use the useMapEvent and listen for the end of the Zoom to trigger the stage change for the modal to close.

@cowglow

Yes I mean the zoom button provided by react-leaflet by default. If I use touchpad or keyboard (ctrl and +) to zoom then this problem does not arise.