ClickHouse / ClickHouse/click-ui

Button and IconButton default to native type=submit, causing accidental form submissions

Open
#1,092 5 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.