🐛 Add missing cancel event to <input type=file> (mdn#29639)

* Add `cancel` event

https://html.spec.whatwg.org/multipage/indices.html#event-cancel:
Fired at dialog elements when they are canceled by the user (e.g., by pressing the Escape key), or at input elements in the File state when the user does not change their selection

* 📝 Make linter happy

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* 📝 Add an example

* 📝 highlight

* 🐛 typo

* 📝 Move cancel_event to HTMLElement

* 🔥 Removed original HTMLDialogElement/cancel_event

* 📝 Update all links

* 🐛 Sort redirects

* chore: Merge suggestion #1

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* chore: Merge suggestion #2

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* chore: Merge suggestion #3

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* chore: Merge suggestion #4

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* chore: Merge suggestion (5)

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* chore: Merge suggestion (6)

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update files/en-us/web/html/element/input/file/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Estelle Weyl <estelle@weyl.org>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

files/en-us/_redirects.txt

@@ -8099,7 +8099,7 @@
 /en-US/docs/Web/API/Element/MozMousePixelScroll	/en-US/docs/Web/API/Element/MozMousePixelScroll_event
 /en-US/docs/Web/API/Element/accessKey	/en-US/docs/Web/API/HTMLElement/accessKey
 /en-US/docs/Web/API/Element/attachInternals	/en-US/docs/Web/API/HTMLElement/attachInternals
-/en-US/docs/Web/API/Element/cancel_event	/en-US/docs/Web/API/HTMLDialogElement/cancel_event
+/en-US/docs/Web/API/Element/cancel_event	/en-US/docs/Web/API/HTMLElement/cancel_event
 /en-US/docs/Web/API/Element/contentvisibilityautostatechanged_event	/en-US/docs/Web/API/Element/contentvisibilityautostatechange_event
 /en-US/docs/Web/API/Element/createShadowRoot	/en-US/docs/Web/API/Element/shadowRoot
 /en-US/docs/Web/API/Element/error_event	/en-US/docs/Web/API/HTMLElement/error_event
@@ -8414,6 +8414,7 @@
 /en-US/docs/Web/API/HTMLContentElement.select	/en-US/docs/Web/API/HTMLSlotElement
 /en-US/docs/Web/API/HTMLContentElement/getDistributedNodes	/en-US/docs/Web/API/HTMLSlotElement
 /en-US/docs/Web/API/HTMLContentElement/select	/en-US/docs/Web/API/HTMLSlotElement
+/en-US/docs/Web/API/HTMLDialogElement/cancel	/en-US/docs/Web/API/HTMLElement/cancel_event
 /en-US/docs/Web/API/HTMLDialogElement/close()	/en-US/docs/Web/API/HTMLDialogElement/close
 /en-US/docs/Web/API/HTMLDialogElement/returnValue()	/en-US/docs/Web/API/HTMLDialogElement/returnValue
 /en-US/docs/Web/API/HTMLDialogElement/show()	/en-US/docs/Web/API/HTMLDialogElement/show
@@ -11768,7 +11769,7 @@
 /en-US/docs/Web/Events/blur	/en-US/docs/Web/API/Element/blur_event
 /en-US/docs/Web/Events/boundary	/en-US/docs/Web/API/SpeechSynthesisUtterance/boundary_event
 /en-US/docs/Web/Events/bufferedamountlow	/en-US/docs/Web/API/RTCDataChannel/bufferedamountlow_event
-/en-US/docs/Web/Events/cancel	/en-US/docs/Web/API/HTMLDialogElement/cancel_event
+/en-US/docs/Web/Events/cancel	/en-US/docs/Web/API/HTMLElement/cancel_event
 /en-US/docs/Web/Events/canplay	/en-US/docs/Web/API/HTMLMediaElement/canplay_event
 /en-US/docs/Web/Events/canplaythrough	/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event
 /en-US/docs/Web/Events/change	/en-US/docs/Web/API/HTMLElement/change_event

files/en-us/_wikihistory.json

@@ -37809,16 +37809,17 @@
       "dhodder"
     ]
   },
-  "Web/API/HTMLDialogElement/cancel_event": {
-    "modified": "2020-10-15T21:43:04.572Z",
+  "Web/API/HTMLElement/cancel_event": {
+    "modified": "2023-11-04T04:52:37.782Z",
     "contributors": [
       "mfuji09",
       "fscholz",
       "mfluehr",
       "sideshowbarker",
       "fgwang",
       "rolfedh",
-      "cvrebert"
+      "cvrebert",
+      "FurryR"
     ]
   },
   "Web/API/HTMLDialogElement/close": {

files/en-us/web/api/element/index.md

@@ -292,7 +292,7 @@ Listen to these events using `addEventListener()` or by assigning an event liste
 
 - {{domxref("Element/beforematch_event", "beforematch")}} {{Experimental_Inline}}
   - : Fires on an element that is in the [_hidden until found_](/en-US/docs/Web/HTML/Global_attributes/hidden) state, when the browser is about to reveal its content because the user has found the content through the "find in page" feature or through fragment navigation.
-- {{domxref("HTMLDialogElement/cancel_event", "cancel")}}
+- {{domxref("HTMLElement/cancel_event", "cancel")}}
   - : Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the currently open modal dialog. The browser fires this event when the user presses the <kbd>Esc</kbd> key to close the modal dialog.
 - {{domxref("Element/contentvisibilityautostatechange_event", "contentvisibilityautostatechange")}} {{Experimental_Inline}}
   - : Fires on any element with {{cssxref("content-visibility", "content-visibility: auto")}} set on it when it starts or stops being [relevant to the user](/en-US/docs/Web/CSS/CSS_containment#relevant_to_the_user) and [skipping its contents](/en-US/docs/Web/CSS/CSS_containment#skips_its_contents).

files/en-us/web/api/htmldialogelement/index.md

@@ -33,7 +33,7 @@ _Inherits methods from its parent, {{domxref("HTMLElement")}}._
 
 ## Events
 
-- {{domxref("HTMLDialogElement/cancel_event", "cancel")}}
+- {{domxref("HTMLElement/cancel_event", "cancel")}}
   - : Fired when the user dismisses the current open dialog with the escape key.
 - {{domxref("HTMLDialogElement/close_event", "close")}}
   - : Fired when the dialog is closed, whether with the escape key, the `HTMLDialogElement.close()` method, or via submitting a form within the dialog with [`method="dialog"`](/en-US/docs/Web/HTML/Element/form#method).
@@ -42,7 +42,7 @@ _Inherits methods from its parent, {{domxref("HTMLElement")}}._
 
 ### Opening a modal dialog
 
-The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event.
+The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLElement/cancel_event", "cancel")}} event.
 
 #### HTML
 

files/en-us/web/api/htmldialogelement/showmodal/index.md

@@ -37,7 +37,7 @@ None ({{jsxref("undefined")}}).
 
 ### Opening a modal dialog
 
-The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event.
+The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLElement/cancel_event", "cancel")}} event.
 
 #### HTML
 

files/en-us/web/api/htmldialogelement/cancel_event/index.md → files/en-us/web/api/htmlelement/cancel_event/index.md

@@ -1,14 +1,14 @@
 ---
-title: "HTMLDialogElement: cancel event"
+title: "HTMLElement: cancel event"
 short-title: cancel
-slug: Web/API/HTMLDialogElement/cancel_event
+slug: Web/API/HTMLElement/cancel_event
 page-type: web-api-event
-browser-compat: api.HTMLDialogElement.cancel_event
+browser-compat: api.HTMLElement.cancel_event
 ---
 
 {{APIRef}}
 
-The **`cancel`** event fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. The browser fires this event when the user presses the <kbd>Esc</kbd> key.
+The **`cancel`** event is fired by {{HTMLElement("input")}} and {{HTMLElement("dialog")}} elements. The event is fired when the user cancels the currently open dialog by closing it with the <kbd>Esc</kbd> key. It is also fired by the [file input](/en-US/docs/Web/HTML/Element/input/file) when the user cancels the file picker dialog via the <kbd>Esc</kbd> key or the cancel button and when the user re-selects the same files that were previously selected.
 
 This event does not bubble.
 
@@ -30,7 +30,7 @@ A generic {{domxref("Event")}}.
 
 ## Examples
 
-### Live example
+### \<dialog> element
 
 #### HTML
 
@@ -80,7 +80,48 @@ closeButton.addEventListener("click", () => {
 
 #### Result
 
-{{ EmbedLiveSample('Live_example', '100%', '100px') }}
+{{ EmbedLiveSample('dialog_cancel', '100%', '100px') }}
+
+### \<input> element
+
+#### HTML
+
+```html
+<label for="file">Select or file. Or don't.</label>
+<input type="file" id="file" name="file" />
+
+<div id="result"></div>
+```
+
+```css hidden
+div {
+  margin-bottom: 10px;
+}
+```
+
+#### JavaScript
+
+```js
+const elem = document.getElementById("file");
+
+const result = document.getElementById("result");
+
+elem.addEventListener("cancel", () => {
+  result.textContent = "Cancelled.";
+});
+
+elem.addEventListener("change", () => {
+  if (elem.files.length == 1) {
+    result.textContent = "File Selected.";
+  }
+});
+```
+
+#### Result
+
+{{ EmbedLiveSample('input_cancel', '100%', '100px') }}
+
+Open the file selector, then close the selection dialog with the escape key or the cancel button. Both of these will cause the cancel event to be fired. Also, try selecting a local file on your machine; then reopen the file selection window and reselect the same file. This too causes the cancel event to be fired.
 
 ## Specifications
 
@@ -92,5 +133,6 @@ closeButton.addEventListener("click", () => {
 
 ## See also
 
+- HTML {{HTMLElement("input")}} element
 - HTML {{HTMLElement("dialog")}} element
 - {{domxref("HTMLDialogElement/close_event", "close")}}

files/en-us/web/events/index.md

@@ -979,6 +979,7 @@ This section lists events that have _their own_ reference pages on MDN. If you a
   - [webkitmouseforceup event](/en-US/docs/Web/API/Element/webkitmouseforceup_event)
   - [webkitmouseforcewillbegin event](/en-US/docs/Web/API/Element/webkitmouseforcewillbegin_event)
   - [wheel event](/en-US/docs/Web/API/Element/wheel_event)
+  - [cancel event](/en-US/docs/Web/API/Element/cancel_event)
 
 - {{DOMxRef("EventSource")}}
 
@@ -1007,7 +1008,6 @@ This section lists events that have _their own_ reference pages on MDN. If you a
 
 - {{DOMxRef("HTMLDialogElement")}}
 
-  - [cancel event](/en-US/docs/Web/API/HTMLDialogElement/cancel_event)
   - [close event](/en-US/docs/Web/API/HTMLDialogElement/close_event)
 
 - {{DOMxRef("HTMLElement")}}

files/en-us/web/html/element/dialog/index.md

@@ -271,7 +271,7 @@ The `<dialog>` element is exposed by browsers in a manner similar to custom dial
 
 - {{domxref("HTMLDialogElement")}} interface
 - {{domxref("HTMLDialogElement/close_event", "close")}} event
-- {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event
+- {{domxref("HTMLElement/cancel_event", "cancel")}} event
 - {{domxref("HTMLDialogElement/open", "open")}} property of the `HTMLDialogElement` interface
 - [`inert`](/en-US/docs/Web/HTML/Global_attributes/inert) global attribute for HTML elements
 - {{CSSXref("::backdrop")}} CSS pseudo-element

files/en-us/web/html/element/input/file/index.md

@@ -170,6 +170,26 @@ The `accept` attribute doesn't validate the types of the selected files; it prov
 
 Because of this, you should make sure that the `accept` attribute is backed up by appropriate server-side validation.
 
+### Detecting cancellations
+
+The `cancel` event is fired when the user does not change their selection, reselecting the previously selected files. The `cancel` event is also fired when the file picker dialog gets closed, or canceled, via the "cancel" button or the <kbd>escape</kbd> key.
+
+For example, the following code will log to the console if the user closes the popup without selecting a file:
+
+```js
+const elem = document.createElement("input");
+elem.type = "file";
+elem.addEventListener("cancel", () => {
+  console.log("Cancelled.");
+});
+elem.addEventListener("change", () => {
+  if (elem.files.length == 1) {
+    console.log("File selected: ", elem.files[0]);
+  }
+});
+elem.click();
+```
+
 ### Notes
 
 1. You cannot set the value of a file picker from a script — doing something like the following has no effect:
@@ -396,8 +416,9 @@ The example looks like this; have a play:
     <tr>
       <td><strong>Events</strong></td>
       <td>
-        {{domxref("HTMLElement/change_event", "change")}} and
-        {{domxref("HTMLElement/input_event", "input")}}
+        {{domxref("HTMLElement/change_event", "change")}},
+        {{domxref("HTMLElement/input_event", "input")}} and
+        {{domxref("HTMLElement/cancel_event", "cancel")}}
       </td>
     </tr>
     <tr>