[FIX] mail: emoji picker add() should not useRef

`useRef()` hook should only be used in `setup()` of component.
The `add()` function of emoji picker can be used anywhere.

This commit fixes the issue by limiting use of `add()` to pass
Object whose `el` is an element. We should pass the ref immediately
rather than the refName.

closes odoo/odoo#118293

Related: odoo/enterprise#39626
Signed-off-by: Debondt Didier (did) <did@odoo.com>

addons/mail/static/src/composer/composer.js

@@ -119,7 +119,7 @@ export class Composer extends Component {
         useChildSubEnv({
             inComposer: true,
         });
-        useEmojiPicker("emoji-picker", {
+        useEmojiPicker(useRef("emoji-picker"), {
             onSelect: (str) => this.addEmoji(str),
             onClose: () => this.state.autofocus++,
         });

addons/mail/static/src/core_ui/message.js

@@ -133,7 +133,7 @@ export class Message extends Component {
             }
         });
         if (this.props.hasActions && this.canAddReaction) {
-            this.emojiPicker = useEmojiPicker("emoji-picker", {
+            this.emojiPicker = useEmojiPicker(useRef("emoji-picker"), {
                 onSelect: (emoji) => {
                     const reaction = this.message.reactions.find(
                         ({ content, personas }) =>

addons/mail/static/src/emoji_picker/emoji_picker.js

@@ -22,13 +22,13 @@ import { escapeRegExp } from "@web/core/utils/strings";
 
 /**
  *
- * @param {Object|string} [target] if string then it's a ref name, otherwise it's a ref
+ * @param {{ el:HTMLElement }} [ref]
  * @param {Object} props
  * @param {import("@web/core/popover/popover_service").PopoverServiceAddOptions} [options]
  * @param {function} [props.onSelect]
  * @param {function} [props.onClose]
  */
-export function useEmojiPicker(target, props, options = {}) {
+export function useEmojiPicker(ref, props, options = {}) {
     const targets = [];
     const popover = usePopover();
     let closePopover = false;
@@ -43,11 +43,9 @@ export function useEmojiPicker(target, props, options = {}) {
     };
 
     /**
-     * @param {string|Object} target a refName or an Object whose el is an HTMl element target
-     * @param {HTMLElement|Function} [target.el]
+     * @param {{ el: HTMLElement }} ref
      */
-    function add(target, onSelect, { show = false } = {}) {
-        const ref = typeof target === "string" ? useRef(target) : target;
+    function add(ref, onSelect, { show = false } = {}) {
         const toggler = () => toggle(ref, onSelect);
         targets.push([ref, toggler]);
         if (!ref.el) {
@@ -78,8 +76,8 @@ export function useEmojiPicker(target, props, options = {}) {
         }
     }
 
-    if (target) {
-        add(target);
+    if (ref) {
+        add(ref);
     }
     onMounted(() => {
         for (const [ref, toggle] of targets) {

addons/mail/static/src/views/fields/emojis_field_common/emojis_field_common.js

@@ -1,6 +1,7 @@
 /** @odoo-module **/
 
 import { useEmojiPicker } from "@mail/emoji_picker/emoji_picker";
+import { useRef } from "@odoo/owl";
 
 /*
  * Common code for EmojisTextField and EmojisCharField
@@ -11,7 +12,7 @@ export const EmojisFieldCommon = {
      */
     _setupOverride() {
         this.emojiPicker = useEmojiPicker(
-            "emojisButton",
+            useRef("emojisButton"),
             {
                 onSelect: (codepoints) => {
                     const originalContent = this.targetEditElement.el.value;