UI: Use form attribite with a form in doc root to prevent outer form submit

packages/@uppy/dashboard/src/components/FileCard/index.jsx

@@ -1,6 +1,6 @@
-import {  h, Component  } from 'preact'
+import { h, Component } from 'preact'
 import classNames from 'classnames'
-import {  nanoid  } from 'nanoid/non-secure'
+import { nanoid } from 'nanoid/non-secure'
 import getFileTypeIcon from '../../utils/getFileTypeIcon.jsx'
 import ignoreEvent from '../../utils/ignoreEvent.js'
 import FilePreview from '../FilePreview.jsx'
@@ -26,8 +26,7 @@ class FileCard extends Component {
     this.form.id = nanoid()
   }
 
-  // TODO(aduh95): move this to `UNSAFE_componentWillMount` when updating to Preact X+.
-  componentWillMount () { // eslint-disable-line react/no-deprecated
+  componentDidMount () { // eslint-disable-line react/no-deprecated
     this.form.addEventListener('submit', this.handleSave)
     document.body.appendChild(this.form)
   }
@@ -52,8 +51,8 @@ class FileCard extends Component {
     }))
   }
 
-  handleSave = (e) => {
-    e.preventDefault()
+  handleSave = (ev) => {
+    ev.preventDefault()
     const fileID = this.props.fileCardFor
     this.props.saveFileCard(this.state.formState, fileID)
   }
@@ -64,15 +63,6 @@ class FileCard extends Component {
     this.props.toggleFileCard(false)
   }
 
-  saveOnEnter = (ev) => {
-    if (ev.keyCode === 13) {
-      ev.stopPropagation()
-      ev.preventDefault()
-      const file = this.props.files[this.props.fileCardFor]
-      this.props.saveFileCard(this.state.formState, file.id)
-    }
-  }
-
   renderMetaFields = () => {
     const metaFields = this.getMetaFields() || []
     const fieldCSSClasses = {
@@ -102,11 +92,6 @@ class FileCard extends Component {
                 required={required}
                 value={this.state.formState[field.id]}
                 placeholder={field.placeholder}
-                // If `form` attribute is not supported, we need to capture pressing Enter to avoid bubbling in case Uppy is
-                // embedded inside a <form>.
-                onKeyUp={'form' in HTMLInputElement.prototype ? undefined : this.saveOnEnter}
-                onKeyDown={'form' in HTMLInputElement.prototype ? undefined : this.saveOnEnter}
-                onKeyPress={'form' in HTMLInputElement.prototype ? undefined : this.saveOnEnter}
                 onInput={ev => this.updateMeta(ev.target.value, field.id)}
                 data-uppy-super-focusable
               />
@@ -162,7 +147,6 @@ class FileCard extends Component {
                   this.handleSave(event)
                   this.props.openFileEditor(file)
                 }}
-                form={this.form.id}
               >
                 {this.props.i18n('editFile')}
               </button>
@@ -178,8 +162,7 @@ class FileCard extends Component {
               className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Dashboard-FileCard-actionsBtn"
               // If `form` attribute is supported, we want a submit button to trigger the form validation.
               // Otherwise, fallback to a classic button with a onClick event handler.
-              type={'form' in HTMLButtonElement.prototype ? 'submit' : 'button'}
-              onClick={'form' in HTMLButtonElement.prototype ? undefined : this.handleSave}
+              type="submit"
               form={this.form.id}
             >
               {this.props.i18n('saveChanges')}

packages/@uppy/provider-views/package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@uppy/utils": "workspace:^",
     "classnames": "^2.2.6",
+    "nanoid": "^4.0.0",
     "preact": "^10.5.13"
   },
   "peerDependencies": {

packages/@uppy/provider-views/src/SearchProviderView/InputView.jsx

@@ -1,17 +1,27 @@
 import { h } from 'preact'
+import { useEffect } from 'preact/hooks'
+import { nanoid } from 'nanoid/non-secure'
 
 export default ({ i18n, search }) => {
   let input
-  const validateAndSearch = () => {
+  const validateAndSearch = (ev) => {
+    ev.preventDefault()
     if (input.value) {
       search(input.value)
     }
   }
-  const handleKeyPress = (ev) => {
-    if (ev.keyCode === 13) {
-      validateAndSearch()
+
+  const form = document.createElement('form')
+  form.id = nanoid()
+
+  useEffect(() => {
+    form.addEventListener('submit', validateAndSearch)
+    document.body.appendChild(form)
+    return () => {
+      form.removeEventListener('submit', validateAndSearch)
+      document.body.removeChild(form)
     }
-  }
+  })
 
   return (
     <div className="uppy-SearchProvider">
@@ -20,14 +30,14 @@ export default ({ i18n, search }) => {
         type="search"
         aria-label={i18n('enterTextToSearch')}
         placeholder={i18n('enterTextToSearch')}
-        onKeyUp={handleKeyPress}
         ref={(input_) => { input = input_ }}
         data-uppy-super-focusable
+        form={form.id}
       />
       <button
         className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-SearchProvider-searchButton"
-        type="button"
-        onClick={validateAndSearch}
+        type="submit"
+        form={form.id}
       >
         {i18n('searchImages')}
       </button>

packages/@uppy/url/package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@uppy/companion-client": "workspace:^",
     "@uppy/utils": "workspace:^",
+    "nanoid": "^4.0.0",
     "preact": "^10.5.13"
   },
   "peerDependencies": {

packages/@uppy/url/src/UrlUI.jsx

@@ -1,17 +1,27 @@
 import { h, Component } from 'preact'
+import { nanoid } from 'nanoid/non-secure'
 
 class UrlUI extends Component {
+  form = document.createElement('form')
+
+  constructor (props) {
+    super(props)
+    this.form.id = nanoid()
+  }
+
   componentDidMount () {
     this.input.value = ''
+    this.form.addEventListener('submit', this.#handleSubmit)
+    document.body.appendChild(this.form)
   }
 
-  #handleKeyPress = (ev) => {
-    if (ev.keyCode === 13) {
-      this.#handleSubmit()
-    }
+  componentWillUnmount () {
+    this.form.removeEventListener('submit', this.#handleSubmit)
+    document.body.removeChild(this.form)
   }
 
-  #handleSubmit = () => {
+  #handleSubmit = (ev) => {
+    ev.preventDefault()
     const { addFile } = this.props
     const preparedValue = this.input.value.trim()
     addFile(preparedValue)
@@ -26,14 +36,14 @@ class UrlUI extends Component {
           type="text"
           aria-label={i18n('enterUrlToImport')}
           placeholder={i18n('enterUrlToImport')}
-          onKeyUp={this.#handleKeyPress}
           ref={(input) => { this.input = input }}
           data-uppy-super-focusable
+          form={this.form.id}
         />
         <button
           className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Url-importButton"
-          type="button"
-          onClick={this.#handleSubmit}
+          type="submit"
+          form={this.form.id}
         >
           {i18n('import')}
         </button>

yarn.lock

@@ -9072,6 +9072,7 @@ __metadata:
   dependencies:
     "@uppy/utils": "workspace:^"
     classnames: ^2.2.6
+    nanoid: ^4.0.0
     preact: ^10.5.13
   peerDependencies:
     "@uppy/core": "workspace:^"
@@ -9280,6 +9281,7 @@ __metadata:
   dependencies:
     "@uppy/companion-client": "workspace:^"
     "@uppy/utils": "workspace:^"
+    nanoid: ^4.0.0
     preact: ^10.5.13
   peerDependencies:
     "@uppy/core": "workspace:^"