diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js index 614a676d18e..4fb94380139 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js @@ -48,6 +48,9 @@ export class Link extends Component { ]; setup() { this.state = useState({}); + // We need to wait for the `onMounted` changes to be done before + // accessing `this.$el`. + this.mountedPromise = new Promise(resolve => this.mountedResolve = resolve); onWillStart(() => this._updateState(this.props)); let started = false; @@ -82,8 +85,10 @@ export class Link extends Component { this.$el.find('[name="url"]').on('change', this._onURLInputChange.bind(this)); await this.start(); + this.mountedResolve(); }); - onWillUpdateProps((newProps) => { + onWillUpdateProps(async (newProps) => { + await this.mountedPromise; this._updateState(newProps); this.state.url = newProps.link.getAttribute('href') || ''; this._setUrl({ shouldFocus: newProps.shouldFocusUrl }); @@ -182,7 +187,7 @@ export class Link extends Component { * Focuses the url input. */ focusUrl() { - const urlInput = this.linkComponentWrapperRef.el.querySelector('input[name="url"]'); + const urlInput = this.$el[0].querySelector('input[name="url"]'); urlInput.focus(); urlInput.select(); } diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js index 92d1b71bfe0..96d09bc7e35 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js @@ -52,7 +52,8 @@ export class LinkTools extends Link { setup() { super.setup(...arguments); - onWillUpdateProps((newProps) => { + onWillUpdateProps(async (newProps) => { + await this.mountedPromise; this.$link = newProps.link ? $(newProps.link) : this.link; this._setSelectOptionFromLink(); this._updateOptionsUI();