Unintended Click Event Propagation from Sort Dropdown to Product Card in Next.js 14.2.2 Application [bug]:

[h9ee]

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