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='&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 ?!?
Add stopPropagation
event to Marker
Icon.
const IconOnClick = (e, index) => {
e.originalEvent.stopPropagation();
....
}