The onClick event.detail contains the number of clicks: double-click has event.detail = 2
.
When the clicked React component is replaced, the event.detail does not reset. I suspect this is because React has optimized this & kept the same div in the page, so the browser has not reset the event.detail counter.
How can I force this event.detail counter to reset when the component is changed? I want to be able to double-click items in the list multiple times while navigating.
Issue reproduction: https://codesandbox.io/p/sandbox/react-on-click-event-detail-6ndl5v?file=%2Fsrc%2FApp.tsx%3A44%2C12
App.tsx:
const ListItem: React.FC<{
content: string;
onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
}> = ({ content, onClick }) => {
return (
<div
onClick={onClick}
style={{ background: "rgba(0,0,0,0.5)", userSelect: "none" }}
>
{content}
</div>
);
};
const ListRenderer: React.FC = () => {
// n tracks the number of double clicks
const [n, setN] = useState(0);
// items simulates an updating list of items when double-clicking
const items = useMemo(
() => Array.from({ length: 10 }, (_, i) => `${n}: item ${i}`),
[n]
);
const handleClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
console.log(`Click: event.detail: ${event.detail}`);
if (event.detail === 2) {
// Double-clicked an item.
setN((prev) => prev + 1);
}
}, []);
return (
<>
<div>
{items.map((item, index) => (
<ListItem
key={`items-${n}-${index}`}
content={item}
onClick={handleClick}
/>
))}
</div>
</>
);
};