ClickHouse / ClickHouse/click-ui
Button and IconButton default to native type=submit, causing accidental form submissions
- Dominant language
- TypeScript
- Stars
- 135
- Forks
- 33
- Avg merge
- 2d 13h
- Merged PRs (30d)
- 19
Description
## Summary
A native `` without an explicit `type` defaults to `type="submit"`. Because `Button` and `IconButton` never set the native type, every click-ui button rendered inside a `` becomes a submit button. Clicking an unrelated button (an "add item" button, a delete/trash icon, etc.) submits the surrounding form.
The `type` prop is reused for the visual variant, so there is no obvious way to set the native type.
## Current state (v0.6.1)
- `Button` has an `htmlType` prop, but it is not defaulted, so it still inherits the browser default of `submit`.
- `IconButton` has no `htmlType` prop at all, so there is no way to make it a non-submit button via the public API.
## Repro
```tsx
console.log('submitted')}>
```
Clicking "Add item" or the trash icon submits the form.
## Proposed fix
1. Add an `htmlType` prop to `IconButton` for parity with `Button`.
2. Default `htmlType` to `"button"` on both `Button` and `IconButton`, and forward it to the native element's `type`. Consumers opt in to submit with `htmlType="submit"`.
This matches the convention used by Ant Design, MUI, and Chakra, and removes the accidental-submit footgun.
```tsx
const Button = ({ type = 'primary', htmlType = 'button', ...delegated }) =>
;
```
## Breaking change note
Defaulting to `"button"` means consumers relying on implicit submit must add `htmlType="submit"` to their submit buttons. This is a deliberate, greppable change and safer than the current silent-submit default.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start at the Button and IconButton component entry points and inspect how their htmlType props reach the native button element. Check the existing component tests for form and button behavior, then verify that non-submit buttons no longer submit forms while htmlType="submit" still does.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100