From 3af6c593e37a5c62c5d2c2a65e2dd08023cefa99 Mon Sep 17 00:00:00 2001
From: Lars <32460418+advename@users.noreply.github.com>
Date: Tue, 13 Apr 2021 12:08:33 +0200
Subject: [PATCH 1/2] Added form types and their descriptions

I was looking for a complete list of form types and couldn't find any anywhere.
I went through the source code and extracted these with adding some description to them, either using MDN's description or some other website explanation.
---
 .../basic/getting-started/forms-and-events.md | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/docs/basic/getting-started/forms-and-events.md b/docs/basic/getting-started/forms-and-events.md
index 90526c63..5b7d3351 100644
--- a/docs/basic/getting-started/forms-and-events.md
+++ b/docs/basic/getting-started/forms-and-events.md
@@ -98,3 +98,33 @@ If you don't quite care about the type of the event, you can just use React.Synt
 [View in the TypeScript Playground](https://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtCAOwGctoRlM4BeRYmAOgFc6kLABQBKClVoM4AMSbs4o9gD4FFOHAA8mJmrhFMbAN7aozJJgC+u2gGVeAIxDAYRoUgBcndDxsBPGjAAFkgwwGgAogBuSAEiynCGuupI3GBE0QEAIuYovAA2MKIA3Elw1PTwMChQAOYh8ilVtfUodHAwvmBIEKyN1XXwAGQJpckgKMB5noZwkSh5vB5wDFDANDVwFiXk6rtwYK10AO7QACbTs-OLnitrG1ulDzu75VJI45PyTQPc7xN53DmCyQRTgAHowe1Okg0ME0ABrOgAQlKr3gBzoxzOX36IVShxOUFOgKuIPBkI6XVhMMRKOe6ghcBCaG4rN0Fis5CUug0p2AkW59M0eRQ9iQeUFe3U4Q+U1GmjWYF4lWhbAARH9Jmq4DQUCAkOrNXltWDJbsNGCRWKJTywXyBTz7Wb1BoreLnbsAAoEs7ueUaRXKqFddUYrFE7W6-Whn0R8Eei1um3PC1Ox38hOBlUhtV0BxOGDaoGLdUAGQgGzWJrNqYzFAtJhAgpEQA)
 
 Of course, if you're making any sort of significant form, [you should use Formik](https://jaredpalmer.com/formik) or [React Hook Form](https://react-hook-form.com/), which are written in TypeScript.
+
+**List of event types**
+| Event Type  | Description                                                                                                                   |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| AnimationEvent   | CSS Animations.                                                                                                               |
+| ChangeEvent      | Changing the value of `<input>`, `<select>` and `<textarea>` element.                                                         |
+| ClipboardEvent   | Using copy, paste and cut events.                                                                                             |
+| CompositionEvent | Events that occur due to the user indirectly entering text (e.g. depending on Browser and PC setup, a popup window may appear with additional characters if you e.g. want to type Japanese on a US Keyboard)                                                                                                                           |
+| DragEvent        | Drag and drop interaction with a pointer device (e.g. mouse).                                                                 |
+| FocusEvent       | Event that occurs when elements gets or loses focus.                                                                          |
+| FormEvent        | Event that occurs whenever a form or form element gets/loses focus, a form element value is changed or the form is submitted. |
+| InvalidEvent     | Fired when validity restrictions of an input fails (e.g `<input type="number" max="10">` and someone would insert number 20). |
+| KeyboardEvent    | User interaction with the keyboard. Each event describes a single key interaction.                                            |
+| MouseEvent       | Events that occur due to the user interacting with a pointing device (e.g. mouse)                                             |
+| PointerEvent     | Events that occur due to user interaction with a variety pointing of devices such as mouse, pen/stylus, a touchscreen and which also supports multi-touch. Unless you develop for older browsers (IE10 or Safari 12), pointer events are recommended. Extends UIEvent.                                                                                                                       |
+| TouchEvent       | Events that occur due to the user interacting with a touch device. Extends UIEvent.                                                                                                                           |
+| TransitionEvent  |  CSS Transition. Not fully browser  supported. Extends UIEvent                                                                                                                             |
+| UIEvent          |  Base Event for Mouse, Touch and Pointer events.                                                                                                                             |
+| WheelEvent       | Scrolling on a mouse wheel or similar input device. (Note:  `wheel` event should not be confused with the `scroll` event)                                                                                                                              |
+| SyntheticEvent   |  The base event for all above events. Should be used when unsure about event type                                                                                                                           |
+
+> **InputEvent ?**
+> You probably noticed that there is no InputEvent. This is because it is not supported by Typescript as the event itself has no fully browser support and may behave differently in different browsers.
+> It's suggested to use `KeyboardEvent` instead
+> Sources:
+>
+> - https://github.com/microsoft/TypeScript/issues/29441
+> - https://developer.mozilla.org/en-US/docs/Web/API/InputEvent
+> - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
+

From 111113f77a9f6b064751d277dc19e5a037fce65f Mon Sep 17 00:00:00 2001
From: swyx <shawnthe1@gmail.com>
Date: Thu, 15 Apr 2021 07:49:48 +0800
Subject: [PATCH 2/2] Apply suggestions from code review

---
 .../basic/getting-started/forms-and-events.md | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/docs/basic/getting-started/forms-and-events.md b/docs/basic/getting-started/forms-and-events.md
index 5b7d3351..023b0604 100644
--- a/docs/basic/getting-started/forms-and-events.md
+++ b/docs/basic/getting-started/forms-and-events.md
@@ -99,7 +99,9 @@ If you don't quite care about the type of the event, you can just use React.Synt
 
 Of course, if you're making any sort of significant form, [you should use Formik](https://jaredpalmer.com/formik) or [React Hook Form](https://react-hook-form.com/), which are written in TypeScript.
 
-**List of event types**
+### List of event types
+
+
 | Event Type  | Description                                                                                                                   |
 | ---------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | AnimationEvent   | CSS Animations.                                                                                                               |
@@ -119,12 +121,19 @@ Of course, if you're making any sort of significant form, [you should use Formik
 | WheelEvent       | Scrolling on a mouse wheel or similar input device. (Note:  `wheel` event should not be confused with the `scroll` event)                                                                                                                              |
 | SyntheticEvent   |  The base event for all above events. Should be used when unsure about event type                                                                                                                           |
 
-> **InputEvent ?**
-> You probably noticed that there is no InputEvent. This is because it is not supported by Typescript as the event itself has no fully browser support and may behave differently in different browsers.
-> It's suggested to use `KeyboardEvent` instead
-> Sources:
->
-> - https://github.com/microsoft/TypeScript/issues/29441
-> - https://developer.mozilla.org/en-US/docs/Web/API/InputEvent
-> - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
+<details>
+<summary>
+
+**What about `InputEvent`?**
 
+</summary>
+
+You've probably noticed that there is no `InputEvent`. This is because it is not supported by Typescript as the event itself has no fully browser support and may behave differently in different browsers. You can use `KeyboardEvent` instead.
+
+Sources:
+
+ - https://github.com/microsoft/TypeScript/issues/29441
+ - https://developer.mozilla.org/en-US/docs/Web/API/InputEvent
+ - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
+
+</details>