diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js index 88fb521e82e..1e272349f08 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js @@ -1659,25 +1659,30 @@ export class Wysiwyg extends Component { const targetEl = this.odooEditor.document.getSelection(); const closest = closestBlock(targetEl.anchorNode); const restoreSelection = preserveCursor(this.odooEditor.document); - const blockWidth = parseInt(getComputedStyle(closest).width.slice(0, -2)); // remove 'px' - // Calculate one/fouth portion of blockWidth, and then on the basis of our cursor position - // check in which quadrant it falls, give the popover its position accordingly - const portionWidth = (blockWidth / 4); - const cursorAt = getRangePosition(targetEl, this.odooEditor.document).left; - let position = 'end'; - if (cursorAt < portionWidth * 2) { - position = 'start'; - } else if (cursorAt <= portionWidth * 3) { - position = 'middle'; - } this.popover.add(closest, EmojiPicker, { onSelect: (str) => { restoreSelection(); this.odooEditor.execCommand('insert', str); }, + }, { + onPositioned: (popover) => { + restoreSelection(); + // Set the 'parentContextRect' option in 'options' when + // 'getContextFromParentRect' is available. This facilitates + // element positioning relative to a parent or reference + // rectangle. + const options = {}; + if (this.options.getContextFromParentRect) { + options['parentContextRect'] = this.options.getContextFromParentRect(); + } + const rangePosition = getRangePosition(popover, this.options.document, options); + popover.style.top = rangePosition.top + 'px'; + popover.style.left = rangePosition.left + 'px'; + const oInputBox = popover.getElementsByClassName('o_input')[0]; + oInputBox.focus(); + }, }, - { position: `bottom-${position}`} ); } /**