keepMounted in Hover.Card v9

[unborn kiln]

Hello,
I've recently migrate from v7 to v9.

I was using an HoverCard with keepMounted prop; we need that the HoverCard.Dropdown component is not unmounted cause inside that there are some children components that insert points into a map.

In v9 the keepMounted prop doesn't work. If I put a console.log on the component unmount, every time the mouse leave the Target the component unmount.

Could you please help me?
Thanks

[coral schooner]

It now uses React Activity component in v9 it works differently compared to v7. Can you give code that has issue?

[unborn kiln]

Hi @coral schooner, sure. Here is our code, I cut some unneccesary parts:

This is the component with HoverCard:
<HoverCard shadow={'sm'} keepMounted position={'bottom-start'} withinPortal>
<HoverCard.Target>
<Badge
style={{ cursor: 'pointer' }}
color={lineColor as MantineColor}
size={'xl'}
leftSection={
followEventsQuery.isPending && (
<Loader pos={'relative'} size={'xs'} color={'white'} type={'oval'} />
)
}
rightSection={<Icon icon={ICONS.EXPIRED} onClick={() => toggleVehicleVisibility(vehicle)} />}
onClick={handleTimeLineOpen}
>
{vehicle.plate}
</Badge>
</HoverCard.Target>
<HoverCard.Dropdown>
<Stack>
{/* ...some other code */}
<VehicleBadgeToggle
key={eventType.value}
type={eventType}
vehicle={vehicle}
followEvents={followEvents?.filter(
(fe) => fe.eventType.is(eventType.value) && fe.trackingCode === device.trackingDevice.trackingCode
)}
device={device}
/>
</Stack>
</HoverCard.Dropdown>
</HoverCard>

Inside the dropdown there is the <VehicleBadgeToggle /> component, which has inside an Effect to insert in the Map (from Mapbox) some points

[coral schooner]

With <Activity mode="hidden">, React preserves state and DOM but unmounts all effects (every useEffect cleanup runs, just like an unmount). When the activity becomes visible again, the effects re-run. This is by design in React, not a Mantine bug — and it's why your console.log in a cleanup fires on every mouse leave.

So an effect inside VehicleBadgeToggle that calls e.g. map.addLayer(...) and cleans up with map.removeLayer(...) will keep adding/removing Mapbox points each time the HoverCard opens/closes. State is preserved, but side effects are not

The clean fix is to lift the Mapbox side effect out of the dropdown so it doesn't depend on HoverCard's visibility:

1. Move the useEffect that inserts points on the map into a parent component that is always mounted (e.g., the component that owns the Badge / HoverCard). Drive its behavior off the same vehicle / followEvents data. The dropdown then renders only UI.
2. Or, if the map points really must live with the toggle component, render VehicleBadgeToggle outside HoverCard.Dropdown and only render its UI portion inside the dropdown.