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

[arturi]

ToDo:

• Unplash (SearchProvder), Meta editor, Url plugin
• check provider view search/filter
• anything else uses inputs in Uppy?

[mifi]

Shouldn't we do this form trick inside Filter.jsx too? Actually even better: could we merge InputView and Filter into one component? As far as I understand, they are basically the same thing, but they only look a bit different.

[Murderlon]

@nickrttn can you give this a quick review from the React side of things?

[nickrttn]

Just curious why you wouldn't always render the form? eg.

   <div className="uppy-SearchProvider">
      <form onSubmit={handleSearch} className="visually-hidden" tabIndex="-1" id={formId}/>
      <input
        className="uppy-u-reset uppy-c-textInput uppy-SearchProvider-input"
        type="search"
        aria-label={i18n('enterTextToSearch')}
        placeholder={i18n('enterTextToSearch')}
        value={searchText}
        onInput={onSearchTextChange}
        data-uppy-super-focusable
        form={formId}
      />

[arturi]

why you wouldn't always render the form

The whole point of this PR in the beginning was to avoid forms/inputs inside a form. If someone wraps Uppy Dashboard in a <form>, and we also have a <form> inside Uppy UI — it’s an issue, can't have nested forms in HTML.

[arturi]

@aduh95 Jest is going crazy for some reason, I suspect it’s something to do with the addition of hooks import { useEffect, useState, useCallback } from 'preact/hooks'. Do you have an idea?

Details:

    /home/runner/work/uppy/uppy/node_modules/preact/hooks/dist/hooks.module.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import{options as n}from"preact";var t,u,r,o,i=0,c=[],f=[],e=n.__b,a=n.__r,v=n.diffed,l=n.__c,m=n.unmount;function p(t,r)