From bd443138d21e0d3a6977cb14dffdc0510096c863 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Thu, 29 Sep 2022 13:27:42 +0000
Subject: [PATCH] [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>
---
 .../static/src/components/media_dialog/file_selector.xml    | 6 +++---
 .../static/src/components/media_dialog/icon_selector.xml    | 4 ++--
 .../static/src/components/media_dialog/image_selector.xml   | 2 +-
 .../static/src/components/media_dialog/video_selector.xml   | 4 ++--
 .../static/src/components/media_dialog/image_selector.js    | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/addons/web_editor/static/src/components/media_dialog/file_selector.xml b/addons/web_editor/static/src/components/media_dialog/file_selector.xml
index fff450e4441..c7cbe32c19a 100644
--- a/addons/web_editor/static/src/components/media_dialog/file_selector.xml
+++ b/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>
diff --git a/addons/web_editor/static/src/components/media_dialog/icon_selector.xml b/addons/web_editor/static/src/components/media_dialog/icon_selector.xml
index 6b641b0ada6..3a403d59a45 100644
--- a/addons/web_editor/static/src/components/media_dialog/icon_selector.xml
+++ b/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>
diff --git a/addons/web_editor/static/src/components/media_dialog/image_selector.xml b/addons/web_editor/static/src/components/media_dialog/image_selector.xml
index 9f149a59595..bb45950082b 100644
--- a/addons/web_editor/static/src/components/media_dialog/image_selector.xml
+++ b/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"/>
diff --git a/addons/web_editor/static/src/components/media_dialog/video_selector.xml b/addons/web_editor/static/src/components/media_dialog/video_selector.xml
index 5e9b44f4cf7..ece78946bff 100644
--- a/addons/web_editor/static/src/components/media_dialog/video_selector.xml
+++ b/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>
diff --git a/addons/web_unsplash/static/src/components/media_dialog/image_selector.js b/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
index 81115d8a40a..1b247d9beac 100644
--- a/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
+++ b/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;