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

[danny-avila]

Summary

A native <button> without an explicit type defaults to type="submit". Because Button and IconButton never set the native type, every click-ui button rendered inside a <form> 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

<form onSubmit={() => console.log('submitted')}>
  <IconButton icon="trash" onClick={removeRow} />
  <Button type="secondary" label="Add item" onClick={addRow} />
  <Button type="primary" label="Save" htmlType="submit" />
</form>

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.

const Button = ({ type = 'primary', htmlType = 'button', ...delegated }) =>
  <StyledButton $styleType={type} type={htmlType} {...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.

[danny-avila]

Workaround in the meantime: ClickHouse/librechat-admin-panel#83

[gjones]

@hoorayimhelping Thoughts here?

[ariser]

Add an htmlType prop to IconButton for parity with Button.

100% we should do it, I did not think about IconButton when I added htmlType in #1077

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 is debatable, but I can agree. A more important consequence of this suggestion is, since this is a breaking change and will require refactoring, we might as well rename the prop. htmlType is a hacky prop name I used to avoid said refactoring. If we're defaulting to type="button", we'll have to go over the usages of both components and update them. This might be the moment when we rename type to variant (for example) and use the type prop for actual button type.

So, let's either keep type=submit as the default, or do both changes as a package.

[ariser]

I made a judgement call and opened a PR that should fix the majority of flow breaking issues click-ui has in regard to form submission
#1126

• IconButton (and also SplitButton) now also accept htmlType
• another big issue fixed: all buttons used inside other components are now explicitly type=button. Before this change a lot of components would unintentionally trigger form submission when clicked, e.g. when you select a ButtonGroup option

defaulting to type=button for general-purpose buttons is deliberately out of the scope here
we can discuss it separatly and repurpose this issue to make this breaking change

[ariser]

#1126 is merged (did not release a new version)
The only remaining question here is whether we need to default to type="button", and, conincidentally, should we also start using type instead of htmlType