Inside my Next.js app, i added a Spline component like so
const Blob: React.FC<BlobProps> = ({ setIsBlobLoading }) => {
const scene = "https://prod.spline.design/0Fktb5VBB3QzS3Aw/scene.splinecode";
const handleContextMenu = (e: React.MouseEvent) => {
console.log("right click")
};
return (
<div className="mt-24 lg:mt-0 h-[60%] lg:h-auto" onContextMenu={handleContextMenu}>
<Suspense fallback={null}>
<Spline scene={scene} onLoad={() => setIsBlobLoading(false)} />
</Suspense>
</div>
);
};
The Spline component renders a canvas element that occupies the entire viewport width. The issue is that right clicking over the Spine component logs “right click” in the console as expected but the browser’s context menu doesn’t appear. Any thoughts on this?