diff --git a/addons/website/static/src/snippets/s_searchbar/000.js b/addons/website/static/src/snippets/s_searchbar/000.js index 319357f7ac0..63f1399e2fd 100644 --- a/addons/website/static/src/snippets/s_searchbar/000.js +++ b/addons/website/static/src/snippets/s_searchbar/000.js @@ -142,6 +142,7 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({ delete this._menuScrollAndResizeHandler; } + let pageScrollHeight = null; const $prevMenu = this.$menu; if (res && this.limit) { const results = res['results']; @@ -180,6 +181,7 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({ } } + pageScrollHeight = document.querySelector("#wrapwrap").scrollHeight; this.$el.append(this.$menu); this.$el.find('button.extra_link').on('click', function (event) { @@ -198,6 +200,24 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({ if ($prevMenu) { $prevMenu.remove(); } + // Adjust the menu's position based on the scroll height. + if (res && this.limit) { + this.el.classList.remove("dropup"); + delete this.$menu[0].dataset.bsPopper; + const wrapwrapEl = document.querySelector("#wrapwrap"); + if (wrapwrapEl.scrollHeight > pageScrollHeight) { + // If the menu overflows below the page, we reduce its height. + this.$menu[0].style.maxHeight = "40vh"; + this.$menu[0].style.overflowY = "auto"; + // We then recheck if the menu still overflows below the page. + if (wrapwrapEl.scrollHeight > pageScrollHeight) { + // If the menu still overflows below the page after its height + // has been reduced, we position it above the input. + this.el.classList.add("dropup"); + this.$menu[0].dataset.bsPopper = ""; + } + } + } }, _getFieldsNames() { return [