Unintended Click Event Propagation from Sort Dropdown to Product Card in Next.js 14.2.2 Application [bug]:
h9ee opened this issue · 1 comments
Describe the bug
When using the SortProduct component in a Next.js project with React, clicking on the sort dropdown inadvertently triggers a click on the product card located behind the dropdown. This unintended interaction likely occurs due to event propagation where the click event on the dropdown is not confined to the dropdown itself but bubbles up to other elements.
Clicking on the sort dropdown should only trigger the dropdown actions (i.e., displaying options and allowing the user to select one) without affecting other UI components behind or around the dropdown.
Clicking the sort dropdown triggers both the dropdown's functionality and the click event of a product card that lies in the background, possibly navigating away from the current view or executing other unintended actions associated with the product card.
Affected component/components
Select
How to reproduce
`
const stopPropagation = (e: React.MouseEvent) => {
e.stopPropagation();
};
<Select value={selectedSort} onValueChange={(e) => handleChange(e)} onClick={stopPropagation}>
`
i added onClick on type :
export interface SelectProps { children?: React.ReactNode; value?: string; defaultValue?: string; onValueChange?(value: string): void; open?: boolean; defaultOpen?: boolean; onOpenChange?(open: boolean): void; dir?: Direction; name?: string; autoComplete?: string; disabled?: boolean; required?: boolean; onClick?: (event: React.MouseEvent<HTMLDivElement>) => void; }
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
Ubuntu, chrome,
Before submitting
- I've made research efforts and searched the documentation
- I've searched for existing issues