Support Popper virtual elements

[septatrix]

Fixes #32365

[alecpl]

I think getBoundingClientRect is available in all supported browsers, no?

[XhmikosR]

I think getBoundingClientRect is available in all supported browsers, no?

Yup. We already make use of it in the codebase.

[septatrix]

I think getBoundingClientRect is available in all supported browsers, no?

Yes but if you refer to the check that is due to getBoundingClientRect being required for popper virtual elements which can be arbitrary objects as long as the provide this method.

[alecpl]

@septatrix nevermind my comment, I've now learned what this is about ;) Sorry for noise.

[septatrix]

I tidied up the commit history a bit.

I also thought about adding an example using a virtual element but I do not think it is worthwhile as it would be longer than most other examples and most most of the other options do not really have examples as well. However if you also would want to add an example I would suggest something like I drafted in this codepen which uses virtual elements to provide a custom contextmenu at the cursor position. (The codepen uses some trickery to make bootstrap think the passed object is an element as it does not use a patched version.)

[septatrix]

@XhmikosR should I rebase them again to squash your commits into the previous ones or do PRs get squashed when merging? I only read in the contribution guidelines that you would like to have a clean commit log :D

[XhmikosR]

All good, we can squash when merging.

[rohit2sharma95]

But the reference that is passed in the configuration is not being used for the reference of Popper 🤔
This code is still the same:

bootstrap/js/src/dropdown.js

Lines 164 to 175 in 4e7c9e5

	let referenceElement = this._element
	if (this._config.reference === 'parent') {
	referenceElement = parent
	} else if (isElement(this._config.reference)) {
	referenceElement = this._config.reference
	// Check if it's jQuery element
	if (typeof this._config.reference.jquery !== 'undefined') {
	referenceElement = this._config.reference[0]
	}
	}

So even if you pass the reference as an object, it does not make any change in the dropdown.
@septatrix 🙂

[septatrix]

Fixed

[rohit2sharma95]

If you add the .dropdown-menu-end class in the .dropdown-menu, the position of the dropdown is wrong (position is not as per the passed coordinates). But that's not the issue of Popper. Works well without .dropdown-menu-end.

[septatrix]

If you add the .dropdown-menu-end class in the .dropdown-menu, the position of the dropdown is wrong (position is not as per the passed coordinates). But that's not the issue of Popper. Works well without .dropdown-menu-end.

What exactly do you mean with wrong. It is now to the left of the passed coordinates as long as there is space for it which is what I would expect. Some bad positioning happens at e.g. lower screen edges but that also happens to normal dropdowns.

[septatrix]

Some bad positioning happens at e.g. lower screen edges but that also happens to normal dropdowns.

Nevermind. It just changes to left positioning so that it is centered above the cursor so that is working as intended i guess.

I did however notice a misbehaving placement in a few cases but that may have been fixed on main by now.

[rohit2sharma95]

LGTM 👍

Maybe in the future, tooltip/popover can also use this virtual element feature to follow the mouse cursor.

[XhmikosR]

Should we change this to a TypeError instead of the generic Error?

[rohit2sharma95]

True, missed it 😄
But then it should also be TypeError 🤔

bootstrap/js/src/util/index.js

Lines 119 to 123 in 44667d8

	throw new Error(
	`${componentName.toUpperCase()}: ` +
	`Option "${property}" provided type "${valueType}" ` +
	`but expected type "${expectedTypes}".`)
	}

[XhmikosR]

OK, let's leave it as is for now and we tackle it later.