React-MUI add exception for ClickAwayListener

Question

Hi I'm new to MUI and I am trying to use ClickAwayListener API in my project but I cant figure it out .
as you can see my project here in codesandbox: https://codesandbox.io/s/react-leaflet-icon-material-forked-3vnvvd

I am trying to show my friends on map by leaflet by defining 5 buttons by Fab component in MUI.
when you click on their names by passing their name to MapInfo component , their name is shown on Card in map .
here is App function code in index.js :

export default function App() {
  const [show, setShow] = React.useState(false);
  const [name, setName] = React.useState("");

  const friends = [
    {
      name: "john",
      pos: [51.499, -0.091]
    },
    {
      name: "jane",
      pos: [51.508, -0.12]
    },
    {
      name: "jack",
      pos: [51.509, -0.08]
    },
    {
      name: "jill",
      pos: [51.505, -0.091]
    },
    {
      name: "jason",
      pos: [51.517, -0.091]
    },
    {
      name: "justin",
      pos: [51.517, -0.11]
    }
  ];

  //onclick listener

  const IconOnClick = (e, index) => {
    setName(friends[index]["name"]);
    if (!show) {
      setShow((prev) => !prev);
    }
  };

  // defining Icons

  const makeIcon = (data) => {
    return data.map((a) => {
      const Icons = divIcon({
        html: renderToStaticMarkup(
          <Fab size="small" variant="extended">
            {a["name"]}
          </Fab>
        )
      });
      return Icons;
    });
  };

  const myIcons = makeIcon(friends);

  return (
    <div>
      {show && <MapInfo name={name} />}
      <Map center={[51.505, -0.091]} zoom={13}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />

        {myIcons.map((a, index) => (
          <Marker
            position={friends[index]["pos"]}
            icon={a}
            key={index}
            onClick={(e) => {
              IconOnClick(e, index);
            }}
          />
        ))}
      </Map>
    </div>
  );
}

now I want by Clickawaying(not on Icons) the MapInfo component get vanished and if I click on icons repeatedly I want to show their name as it is now show them without geting closed .

the problem is ClickAwayListener cant figure out clickaway on icons from typical clickaways. do you have any ideas for making exceptions on clickAwayListener ?!?

Answer 1

Add stopPropagation event to Marker Icon.

const IconOnClick = (e, index) => {
   e.originalEvent.stopPropagation();
   ....
}

Demo: