On click overlapping elements, both area triggered

[ramonmsp]

Hey!
I am trying to select a Polygon overlapping other. As a result I got both triggered. How can I trigger just the small one?

 const handleInternalClick = (e) => {
    console.log("internal");
  };

  const handleExternalClick = (e) => {
    console.log("external");
  };

 <React.Fragment>
      <RMap
        className="example-map"
        initial={{ center: fromLonLat(coords.origin), zoom: 9 }}
      >
        <ROSM />
        <RLayerVector zIndex={10}>
          <RFeature
            geometry={
              new Polygon([
                [
                  fromLonLat(coords.PlaceDItalie),
                  fromLonLat(coords.Bastille),
                  fromLonLat(coords.point),
                  fromLonLat(coords.TourEiffel),
                ],
              ])
            }
            onClick={handleExternalClick}
          >
            <RStyle>
              <RStroke color="yellow" width={4} />
              <RFill color="#FFFf004D" />
            </RStyle>

            <RFeature geometry={new Point(fromLonLat(coords.Montmartre))}>
              <RStyle>
                <RIcon src={locationIcon} />
              </RStyle>
            </RFeature>
          </RFeature>
          <RLayerVector zIndex={100}>
            <RFeature
              geometry={
                new Polygon([
                  [
                    fromLonLat(internalCoords.coord1),
                    fromLonLat(internalCoords.coord2),
                    fromLonLat(internalCoords.coord3),
                    fromLonLat(internalCoords.coord4),
                    fromLonLat(internalCoords.coord5),
                    fromLonLat(internalCoords.coord6),
                  ],
                ])
              }
              onClick={handleInternalClick}
            >
              <RStyle>
                <RStroke color="red" width={4} />
                <RFill color="#d1001f4D" />
              </RStyle>
            </RFeature>
          </RLayerVector>
        </RLayerVector>
      </RMap>
    </React.Fragment>

[mmomtchev]

What did you expect? How should rlayers know which one is the superposed one? What about partially overlapping polygons?

AFAIK, OpenLayers support multipolygons with holes. You should create a multipolygon with the outer and the inner ring and in this case it should work as you expect. The outer polygon won't overlap with the inner one.

[ramonmsp]

I want to isolate polygon clicks, in the example above, clicking on red polygon should trigger only 'internal' log.
Partially overlapping polygons should have same behaviour. Can you help me with an example?