React-mapbox-gl: onMouseLeave in Layer component not firing

[robinzimmer1989]

Hi there, the onMouseLeave callback on the Layer component is not working.
Do you have a fix for that?

package.json

"mapbox-gl": "^1.0.0",
"react-mapbox-gl": "^4.2.3"

Component

import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl"

const mapShape = ...

let Map = false

// Gatsby specific config
if (typeof window !== `undefined`) {
  Map = ReactMapboxGl({
    accessToken: "..."
  })
}

const Mapbox = () => {

return (
 <>
   {Map &&
    <Map style="mapbox://styles/...">
      <Layer
         paint={{
            "fill-color": "#000",
            "fill-opacity": 1,
            "fill-outline-color": "#fff"
         }}
         onMouseEnter={() => console.log('I'm working fine')}
         onMouseLeave={() => console.log('I'm useless')}
       >
          <Feature coordinates={mapShape} />
      </Layer>
    </Map>
   }
  </>
 )
}

Let me know if you need more information.

Cheers
Robin

[AdriSolid]

Getting same behavior with the following versions:
"mapbox-gl": "^1.6.1" "react-mapbox-gl": "^4.8.2"

[papaiatis]

Have the same issue. I'm using 4.4.0. Looks like this is quite an old issue. @alex3165 could you share your thoughts on this please?

[sraisty1c]

Still an issue in 4.8.2

[ffigari]

Not the same problem but with 4.8.1 and typescript

      <Source
        id={sourceId}
        tileJsonSource={{
          type: "vector",
          tiles: [tilesURL],
          minzoom: minzoom || 0
        }}
      />
      <Layer
        type="fill"
        id={layerId}
        sourceId={sourceId}
        sourceLayer="features"
        paint={paint}
      />

compiles ok while

      <Source
        id={sourceId}
        tileJsonSource={{
          type: "vector",
          tiles: [tilesURL],
          minzoom: minzoom || 0
        }}
      />
      <Layer
        type="fill"
        id={layerId}
        sourceId={sourceId}
        sourceLayer="features"
        paint={paint}
        onMouseEnter={(e) => console.log(e)}
      />

throws the following error:

TypeScript error in /home/francisco/projects/urbansim/penciler/ui/src/components/common/map/TilesLayer.tsx(40,9):
Type '{ type: string; id: string; sourceId: string; sourceLayer: string; paint: any; onMouseEnter: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'type' does not exist on type 'IntrinsicAttributes'.  TS2322

    38 |       />
    39 |       <Layer
  > 40 |         type="fill"
       |         ^
    41 |         id={layerId}
    42 |         sourceId={sourceId}
    43 |         sourceLayer="feature

[mathieudelvaux]

Hi @alex3165!
It seems it's still an ongoing issue in 4.8.6. Any idea on why and how could we mitigate it?