I’m posting this in case Google finds it and it helps someone else. I’m building some mapping functionality using Leaflet, react-leaflet, and MUI components. To add custom controls to the map, I took advantage of this react-leaflet-custom-control library. It worked great. Until I tried to use a MUI Autocomplete component.

I was having an issue where the custom control wasn’t stopping click propagation. I saw that the custom control library was using L.DomEvent.disableClickPropagation(portalRoot) so I assumed it would work. In my case, it did not.

This was the original setup of my code (generalized for public consumption):

const Search = () => {
  const map = useMap()
  const goTo = (place) => {
    map.setView([place.latitude, place.longitude], 13)
  }
  return (
    <>
      <Autocomplete
        disablePortal
        id='combo-box-search'
        options={places}
        onChange={(e, value) => {
          goTo(value)
        }}
        renderInput={(params) => <TextField {...params} label='Search' />}
       />
    </>
  )
}

<MapContainer
  center={[userPosition.latitude, userPosition.longitude]}
  zoom={12}
  scrollWheelZoom={false}
>
  <Control prepend position='topright'>
    <Search />
  </Control>
  <TileLayer
    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
   />
</MapContainer>

The key was that disablePortal prop that I was passing to Autocomplete. Since the custom control uses the portal functionality to target the correct divs and such, that disablePortal in my MUI component was breaking the functionality.

So, word to the wise, you should try understand, better than I do, when a library is telling you that the way it uses portals is potentially tricky. I still don’t fully understand all of this but I did get it working. That basically summarizes my whole engineering career.