[FIX] web_editor: focus url input on double click on link

This commit focuses the url input from the link tools when double
clicking on the link.
It introduces a focusUrl public method on the Link widget, triggered
from the SnippetsMenu after activating a snippet, if the link tools are
shown.

task-2680461

closes odoo/odoo#80796

X-original-commit: add3e05840869d4a885ca18a2bbabfcb61c7a83d
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/js/editor/snippets.editor.js

@@ -1853,6 +1853,15 @@ var SnippetsMenu = Widget.extend({
                 }
 
                 return editorToEnable;
+            }).then(editor => {
+                // If a link was clicked, the linktools should be focused after
+                // the right panel is shown to the user.
+                if (this._currentTab === this.tabs.OPTIONS
+                        && this.options.wysiwyg.linkTools
+                        && !this.options.wysiwyg.linkTools.noFocusUrl) {
+                    this.options.wysiwyg.linkTools.focusUrl();
+                }
+                return editor;
             });
         });
     },

addons/web_editor/static/src/js/wysiwyg/widgets/link.js

@@ -36,6 +36,7 @@ const Link = Widget.extend({
         this.data = data || {};
         this.isButton = this.data.isButton;
         this.$button = $button;
+        this.noFocusUrl = this.options.noFocusUrl;
 
         this.data.className = this.data.className || "";
         this.data.iniClassName = this.data.iniClassName || "";
@@ -143,13 +144,8 @@ const Link = Widget.extend({
 
         this._updateOptionsUI();
 
-        if (!this.options.noFocusUrl) {
-            // ensure the focus in the first input of the link modal
-            setTimeout(()=> {
-                const firstInput = this.$('input:visible:first');
-                firstInput.focus();
-                firstInput.select();
-            }, 0);
+        if (!this.noFocusUrl) {
+            this.focusUrl();
         }
 
         return this._super.apply(this, arguments);
@@ -252,6 +248,14 @@ const Link = Widget.extend({
         }
         return link;
     },
+    /**
+     * Focuses the url input.
+     */
+    focusUrl() {
+        const urlInput = this.el.querySelector('input[name="url"]');
+        urlInput.focus();
+        urlInput.select();
+    },
 
     //--------------------------------------------------------------------------
     // Private

addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js

@@ -4,7 +4,6 @@ odoo.define('wysiwyg.widgets.LinkTools', function (require) {
 const Link = require('wysiwyg.widgets.Link');
 const {ColorPaletteWidget} = require('web_editor.ColorPalette');
 const {ColorpickerWidget} = require('web.Colorpicker');
-const dom = require('web.dom');
 const {
     computeColorClasses,
     getCSSVariableValue,
@@ -53,11 +52,7 @@ const LinkTools = Link.extend({
         this.options.wysiwyg.odooEditor.observerUnactive();
         this.$link.addClass('oe_edited_link');
         this.$button.addClass('active');
-        return this._super(...arguments).then(() => {
-            if (!this.options.noFocusUrl) {
-                dom.scrollTo(this.$(':visible:last')[0], {duration: 0});
-            }
-        });
+        return this._super(...arguments);
     },
     destroy: function () {
         if (!this.el) {
@@ -84,6 +79,18 @@ const LinkTools = Link.extend({
         this._observer.observe(this._link, {subtree: true, childList: true, characterData: true});
     },
 
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    focusUrl() {
+        this.el.scrollIntoView();
+        this._super();
+    },
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------

addons/web_editor/static/src/js/wysiwyg/wysiwyg.js

@@ -203,16 +203,6 @@ const Wysiwyg = Widget.extend({
 
             self.openMediaDialog(params);
         });
-        this.$editable.on('dblclick', this.customizableLinksSelector, function (ev) {
-            if (!this.getAttribute('data-oe-model') && self.toolbar.$el.is(':visible')) {
-                self.showTooltip = false;
-                self.toggleLinkTools({
-                    forceOpen: true,
-                    link: this,
-                    noFocusUrl: $(ev.target).data('popover-widget-initialized'),
-                });
-            }
-        });
 
         if (options.snippets) {
             $(this.odooEditor.document.body).addClass('editor_enable');
@@ -275,7 +265,7 @@ const Wysiwyg = Widget.extend({
                     this.toggleLinkTools({
                         forceOpen: true,
                         link: $target[0],
-                        noFocusUrl: true,
+                        noFocusUrl: ev.detail === 1,
                     });
                 }
             }
@@ -909,6 +899,7 @@ const Wysiwyg = Widget.extend({
                 if (!this.linkTools || ![options.link, ...wysiwygUtils.ancestors(options.link)].includes(this.linkTools.$link[0])) {
                     this.linkTools = new weWidgets.LinkTools(this, {wysiwyg: this, noFocusUrl: options.noFocusUrl}, this.odooEditor.editable, {}, $btn, options.link || this.lastMediaClicked);
                 }
+                this.linkTools.noFocusUrl = options.noFocusUrl;
                 const _onMousedown = ev => {
                     if (
                         !ev.target.closest('.oe-toolbar') &&
@@ -1034,6 +1025,7 @@ const Wysiwyg = Widget.extend({
             }
         });
     },
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------