Repository: zeit-ui/react (ts)

Issue:
Forms with zeit ui react
# Bug report 🐞

Issue created by @viktordueck on [Spectrum](https://spectrum.chat/zeit-ui/general/forms-with-zeit-ui-react~49355452-1cff-49c6-9728-c3d2c0f15895).

1. `Button` cannot trigger form event

> With release `v1.2.1` and later forms do not work with `Input` and `Button`. That means neither the submit button nor the enter key submits the form. There is no way to submit the form and there is no error-message in the console.

2. Keyboard cannot trigger form event

> With release 1.2.0 it is possible to submit the form with a click on the submit button. But it is not possible to submit the form using the keyboard (enter key). the form is cleared and closed (in my example) and chrome shows in the console the message "Form submission canceled because the form is not connected", when pressing the enter key or clicking the cancel button, but nothing is submitted.
For my application it is important to be able to submit with the keyboard. But, I am not sure if this is a bug, a missing feature or a mistake in my implementation.

## Version & Environment

  - v1.2.0+

## Example

[codesandbox](https://codesandbox.io/s/form-with-zeit-ui-dhj5e?from-embed)





Pull request:
fix: fix form events ignored
## PR Checklist

- [x] Fix linting errors
- [x] Label has been added


## Change information

#fixed #201 



Patch:
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 9f2f0b9..d3ef68d 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -17,6 +17,7 @@ interface Props {
   auto?: boolean
   effect?: boolean
   disabled?: boolean
+  htmlType?: React.ButtonHTMLAttributes<any>['type']
   icon?: React.ReactNode
   iconRight?: React.ReactNode
   onClick?: React.MouseEventHandler<HTMLButtonElement>
@@ -26,6 +27,7 @@ interface Props {
 const defaultProps = {
   type: 'default' as ButtonTypes,
   size: 'medium' as NormalSizes,
+  htmlType: 'button' as React.ButtonHTMLAttributes<any>['type'],
   ghost: false,
   loading: false,
   shadow: false,
@@ -57,6 +59,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...btnProps })
     auto,
     size,
     icon,
+    htmlType,
     iconRight,
     className,
     ...props
@@ -115,7 +118,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...btnProps })
   return (
     <button
       ref={buttonRef}
-      type="button"
+      type={htmlType}
       className={`btn ${className}`}
       disabled={disabled}
       onClick={clickHandler}
diff --git a/pages/en-us/components/button.mdx b/pages/en-us/components/button.mdx
index 5c4c110..776eea7 100644
--- a/pages/en-us/components/button.mdx
+++ b/pages/en-us/components/button.mdx
@@ -123,6 +123,7 @@ Used to trigger an operation.
 | **effect** | display animation | `boolean` | - | `true` |
 | **disabled** | disable button | `boolean` | - | `false` |
 | **icon** | show icon in button | `ReactNode` | - | - |
+| **htmlType** | native type of button element | `ButtonHTMLAttributes.type` | - | `button` |
 | **iconRight** | show icon on the other side of the button | `ReactNode` | - | - |
 | **onClick** | click handler | `MouseEventHandler` | - | - |
 | ... | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |
diff --git a/pages/zh-cn/components/button.mdx b/pages/zh-cn/components/button.mdx
index 9c1ce7f..8505d6d 100644
--- a/pages/zh-cn/components/button.mdx
+++ b/pages/zh-cn/components/button.mdx
@@ -124,6 +124,7 @@ export const meta = {
 | **onClick** | 点击事件 | `MouseEventHandler` | - | - |
 | **icon** | 在按钮内显示图标 | `ReactNode` | - | - |
 | **iconRight** | 在按钮的另一侧显示图标 | `ReactNode` | - | - |
+| **htmlType** | 按钮的原生类型属性 | `ButtonHTMLAttributes.type` | - | `button` |
 | ... | 原生属性 | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |
 
 <Attributes.Title>ButtonTypes</Attributes.Title>


Test patch:
diff --git a/components/button/__tests__/__snapshots__/index.test.tsx.snap b/components/button/__tests__/__snapshots__/index.test.tsx.snap
index 21fab06..3c5757d 100644
--- a/components/button/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/button/__tests__/__snapshots__/index.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`Button should render empty button correctly 1`] = `
   disabled={false}
   effect={true}
   ghost={false}
+  htmlType="button"
   loading={false}
   shadow={false}
   size="medium"
@@ -23,6 +24,7 @@ exports[`Button should render special styles 2`] = `
   disabled={false}
   effect={true}
   ghost={false}
+  htmlType="button"
   loading={true}
   shadow={false}
   size="medium"