Need help with stopPropogation.
Unanswered
Kromfohrländer posted this in #help-forum
KromfohrländerOP
I have a Link component wrapping the entire card so the user can click anywhere they want to go to the page.
I have a share button.
When i click on the share button, the page brings me to the page of the link.
const [open, setOpen] = useState(false);
const handleShare = (platform: string) => {
console.log(
setOpen(false);
};
<DialogTrigger asChild>
<button
className='inline-flex items-center gap-1 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/10 hover:bg-green-100 transition-colors duration-300'
onClick={(e) => e.stopPropagation()} // Prevent link navigation
>
<Share2 className='size-3' />
Paylaş
</button>
</DialogTrigger>
Entire code is attached.
I have a share button.
When i click on the share button, the page brings me to the page of the link.
const [open, setOpen] = useState(false);
const handleShare = (platform: string) => {
console.log(
Sharing on ${platform});setOpen(false);
};
<DialogTrigger asChild>
<button
className='inline-flex items-center gap-1 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/10 hover:bg-green-100 transition-colors duration-300'
onClick={(e) => e.stopPropagation()} // Prevent link navigation
>
<Share2 className='size-3' />
Paylaş
</button>
</DialogTrigger>
Entire code is attached.
13 Replies
KromfohrländerOP
This is whats happening
Double-striped Thick-knee
@Kromfohrländer have you tried
e.preventDefault() ?KromfohrländerOP
Here?:
onClick={(e) => e.stopPropagation()} // Prevent link navigation
onClick={(e) => e.stopPropagation()} // Prevent link navigation
instead of preventpropogation
Double-striped Thick-knee
yeah, try preventDefault
KromfohrländerOP
The page doesnt open anymore but i dont get any prompt anymore
So the states dont show either: <Dialog open={open} onOpenChange={setOpen}>
But its okay
i kinda found a loop hole
I just placed my thing outside the link for now..
Double-striped Thick-knee
you could try using router instead of Link component.
or move your dialog out of link, it's better
use useState to open and close the dialog. using button inside Link