Skewed initial positioning of Search Bar's Dropdown menu

[gerteck]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

No response

Tell us about your environment

Windows 11

MarkBind version

5.5.2

Describe the bug and the steps to reproduce it

The search bar's drop down menu has a skewed position when showing search results.

This issue does not seem to affect search bar dropdowns located in the Nav Bar.

We can recreate this issue on MB's user guide page, page on search bar.

• Type in a search term (e.g. 'search bar'), do not do any mouse scroll.
• Dropdown menu is rendered, but cannot be seen.
• Do a mouse scroll, and the dropdown menu repositions correctly.
• To recreate, just click out, click back in, and type another search term
  • Do a mouse scroll, and the dropdown menu reappears

Also just noticed the right-aligned dropdown also has some dynamic styling issues.

Doing inspect element will show that it is not an issue of dropdown menu not rendering, but rather it is being translated out of the viewport.

I suspect it may be something to do with Bootstrap's libraries for dynamically calculating the dropdown menu positioning causing it to be skewed at the start.

Expected behavior

Search bar's drop down menu should be positioned correctly under the search bar from the start.

Anything else?

No response

[gerteck]

In short: The bug arises because Bootstrap's d-none class sets display: none, which removes the dropdown from the rendering tree, making it impossible for Popper.js to position it correctly. When display: block is reapplied, Popper.js has trouble recalculating the position, leading to positioning issues.

---

Leaving my findings here for reference:

This bug is related to Bootstrap (which uses Popper.js aka floating-ui). It is caused by the current implementation for the Searchbar.

Currently, display:none is slapped onto the dropdown menu upon initialization, then applies display:block as results are found for the search bar.

• (display:none is applied through d-none class which applies display:none !important through bootstrap)
• (display:block is applied through show class through bootstrap)

markbind/packages/vue-components/src/Searchbar.vue

Lines 186 to 194 in c8b304c

	dropdownMenuClasses() {
	return [
	'dropdown-menu',
	'search-dropdown-menu',
	{ show: this.showDropdown },
	{ 'd-none': !this.showDropdown },
	{ 'dropdown-menu-end': this.menuAlignRight },
	];
	},

Reason why this is an issue: Popper.js (floating-ui) issue: [Floating-UI: tooltip displays at a wrong offset for elements with display set to none:] https://github.com/floating-ui/floating-ui/issues/413

Popper.js can't know the position of a display: none element, it must be positioned in the DOM to work, and display: none removes the element completely from the rendering three. There aren't solutions, it's a web platform limitation.

CodeSandBox demo demonstrating similar issue: https://codesandbox.io/s/react-popper-v2x-issue-template-forked-59dv1

• Retrieved from [popperjs issue: Wrong Popper Position] https://github.com/floating-ui/popper.js.org/issues/17

Notes:

• d-none was added during migration from Bootstrap 4->5, I believe to hide the dropdown menu when there were no results (unsightly empty tight square). However, this probably caused the subtle bug that went unnoticed. This issue also isn't mentioned, if at all, in bootstrap's documentation., making it easy to miss out I think,

(correct me if I missed out/misunderstood any major aspect)

---

Will aim to open a PR that should hopefully resolve the issue.