I am using react-leaflet with nextjs and I have markers, inside the popups of these markers there is a button that open another page when clicking, but I am getting this error when opening the another page:
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading '_leaflet_disable_click')
Call Stack
NewClass._isClickDisabled
node_modules/leaflet/dist/leaflet-src.js (4350:0)
NewClass._handleDOMEvent
node_modules/leaflet/dist/leaflet-src.js (4357:0)
HTMLDivElement.handler
node_modules/leaflet/dist/leaflet-src.js (2692:0)
The calling of another page is working normally but this error shows while I am not calling _leaflet_disable_click anywhere and I am not sure where it comes from:
const handleOpen = (e, entry) => {
e.preventDefault()
setFormData({
id: entry.id,
topic: entry.topic,
field: entry.field,
officer: entry.officer,
date: entry.date,
fresh: entry.fresh,
createdAt: entry.createdAt,
createdBy: entry.createdBy,
level: entry.level,
category: entry.category,
type: entry.type,
lat: entry.lat,
lng: entry.lng,
expiresAt: entry.expiresAt
})
router.push(`?page=${router.query.page}&form=news_form&id=${entry.id}`, undefined, {shallow: true})
}
You can fix it by calling e.stopPropagation() when the click event of the button is triggered, so in your case you will add it here:
const handleOpen = (e, entry) => {
e.stopPropagation()
e.preventDefault()
...
router.push(`?page=${router.query.page}&form=news_form&id=${entry.id}`, undefined, {shallow: true})
}
This will also avoid the need of a doubled click to open the new page.