search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.83k stars 821 forks source link

[Tooltip] Clicking on the Tooltip in a form leads to submission #3081

Open enix79 opened 2 months ago

enix79 commented 2 months ago

Bug report

Current Behavior

The Tooltip primitive uses a "button" element for its trigger. Sadly, this button does not have a type attribute set to "button", so it is falling back to type = "submit". When one uses the Tooltip in a form and clicks on it, it leads to unwanted form submission.

Expected behavior

Clicking on Tooltip does not submit a form.

Suggested solution

Add type="button" to it.

Your environment

"@radix-ui/react-accordion": "1.2.0", "@radix-ui/react-checkbox": "1.1.1", "@radix-ui/react-collapsible": "1.1.0", "@radix-ui/react-dialog": "1.1.1", "@radix-ui/react-radio-group": "1.2.0", "@radix-ui/react-scroll-area": "1.1.0", "@radix-ui/react-select": "2.1.1", "@radix-ui/react-tabs": "1.1.0", "@radix-ui/react-tooltip": "1.1.2", "react": "^18.2.0", "react-dom": "^18.2.0" "tailwindcss": "3.4.10", "typescript": "5.5.4", "vite": "5.4.1",

ericschmar commented 1 month ago

According to the code (https://github.com/radix-ui/primitives/blob/660060a765634e9cc7bf4513f41e8dabc9824d74/packages/react/tooltip/src/Tooltip.tsx#L276), this was already considered but was decided not to be implemented as there are other use cases to consider, such as an anchor.