[FIX] web_editor, web_unsplash: fix media dialog search

This commit fixes three issues regarding the top left search input of the
Media Dialog.

First, following this flow from the website builder:
- Start the Media Dialog with no images,
=> A visual indication to guide you to use the search input is there
- Type a search query in the top left search input,
- Erase completely the search query,
=> The visual indication is not displayed again.
When [1] reworked the Media Dialog with components, it wrongly
defined the ImageSelector web_unsplash patch to load unsplash images: if
there was no query string, the state.isFetchingUnsplash variable was set
to true and never to false, therefore the component was acting as if
there was still some fetching in progress.

Secondly, pressing 'enter' when the input was focused would trigger a
reload of the window. This was due to an obscure html spec described in
[2]: "When there is only one single-line text input field in a form, the
user agent should accept Enter in that field as a request to submit the
form."
When [3] reworked the design of the Media Dialog, it added a t-if on the
second "url" input, making the form with a single input.
This commit fixes this wrong behaviour by using div elements instead of
forms.

Lastly, [3] also removed the position-fixed on the loading images,
which was preventing to modify the container height before resizing
them. This led to visual glitches before seeing the resized images. This
commit adds back this class to prevent that visual glitch.

[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b
[2]: https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2
[3]: https://github.com/odoo/odoo/commit/ff0b2d441252560a076a3609d81c369f0ce42d19

task-2687506

closes odoo/odoo#101788

X-original-commit: 8ce4036364de2d65921962357b11d905ca3676e0
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Younn Olivier (yol) <yol@odoo.com>

addons/web_editor/static/src/components/media_dialog/file_selector.xml

@@ -16,7 +16,7 @@
                 <option t-if="props.useMediaLibrary" t-att-selected="props.searchService === 'media-library'" value="media-library">Illustrations</option>
             </select>
         </div>
-        <div class="col justify-content-end flex-nowrap input-group has-validation"> 
+        <div class="col justify-content-end flex-nowrap input-group has-validation">
             <input type="text" class="form-control o_input o_we_url_input o_we_transition_ease flex-grow-0" t-att-class="{ o_we_horizontal_collapse: !state.showUrlInput, 'w-auto': state.showUrlInput }" name="url" t-att-placeholder="props.urlPlaceholder" t-model="state.urlInput" t-on-input="onUrlInput" t-if="state.showUrlInput"/>
             <button type="button" class="btn o_upload_media_url_button text-nowrap" t-att-class="{ 'btn-primary': state.urlInput, 'btn-secondary': !state.urlInput}" t-on-click="onUrlUploadClick" t-att-disabled="!enableUrlUploadClick">
                     <t t-esc="props.addText"/>
@@ -37,7 +37,7 @@
 </t>
 
 <t t-name="web_editor.FileSelector" owl="1">
-    <form>
+    <div>
         <FileSelectorControlPanel uploadText="uploadText"
             accept="fileMimetypes"
             urlPlaceholder="urlPlaceholder"
@@ -63,6 +63,6 @@
                 <span><i t-esc="allLoadedText"/></span>
             </div>
         </div>
-    </form>
+    </div>
 </t>
 </templates>

addons/web_editor/static/src/components/media_dialog/icon_selector.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
 <t t-name="web_editor.IconSelector" owl="1">
-    <form action="#">
+    <div>
         <div class="d-flex gap-2 align-items-center py-4">
             <SearchMedia searchPlaceholder="searchPlaceholder"
                 search.bind="this.search"
@@ -18,6 +18,6 @@
                     t-on-click="() => this.onClickIcon(font, icon)"/>
             </t>
         </div>
-    </form>
+    </div>
 </t>
 </templates>

addons/web_editor/static/src/components/media_dialog/image_selector.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
 <t t-name="web_editor.AutoResizeImage" owl="1">
-    <div t-ref="auto-resize-image-container" class="o_existing_attachment_cell o_we_image align-items-center justify-content-center me-1 mb-1 opacity-trigger-hover opacity-0 cursor-pointer" t-att-class="{ o_we_attachment_optimized: props.isOptimized, 'o_loaded position-relative opacity-100': state.loaded, o_we_attachment_selected: props.selected }" t-on-click="props.onImageClick">
+    <div t-ref="auto-resize-image-container" class="o_existing_attachment_cell o_we_image align-items-center justify-content-center me-1 mb-1 opacity-trigger-hover opacity-0 cursor-pointer" t-att-class="{ o_we_attachment_optimized: props.isOptimized, 'o_loaded position-relative opacity-100': state.loaded, o_we_attachment_selected: props.selected, 'position-fixed': !state.loaded }" t-on-click="props.onImageClick">
         <RemoveButton t-if="props.isRemovable" model="props.model" remove="() => this.remove()"/>
         <div class="o_we_media_dialog_img_wrapper">
             <img t-ref="auto-resize-image" class="o_we_attachment_highlight img img-fluid w-100" t-att-src="props.src" t-att-alt="props.altDescription" t-att-title="props.title" loading="lazy"/>

addons/web_editor/static/src/components/media_dialog/video_selector.xml

@@ -17,7 +17,7 @@
 </t>
 
 <t t-name="web_editor.VideoSelector" owl="1">
-    <form action="#" class="row">
+    <div class="row">
         <div class="col mt-4 o_video_dialog_form">
             <div class="mb-2">
                 <label class="col-form-label" for="o_video_text">
@@ -56,6 +56,6 @@
                 </div>
             </div>
         </div>
-    </form>
+    </div>
 </t>
 </templates>

addons/web_unsplash/static/src/components/media_dialog/image_selector.js

@@ -115,10 +115,10 @@ patch(ImageSelector.prototype, 'image_selector_unsplash', {
     set selectedRecordIds(_) {},
 
     async fetchUnsplashRecords(offset) {
-        this.state.isFetchingUnsplash = true;
         if (!this.state.needle) {
             return { records: [], isMaxed: false };
         }
+        this.state.isFetchingUnsplash = true;
         try {
             const { isMaxed, images } = await this.unsplash.getImages(this.state.needle, offset, this.NUMBER_OF_ATTACHMENTS_TO_DISPLAY, this.props.orientation);
             this.state.isFetchingUnsplash = false;