With Bootstrap usage doesn't work with Bootstrap 5

[cpsievert]

Here's a minimal example, adapted from https://github.com/itsjavi/bootstrap-colorpicker#with-bootstrap, which yields the following error:

https://codepen.io/cpsievert/pen/yLgzxqL

Uncaught TypeError: Cannot read property 'tip' of undefined
    at PopupHandler.createPopover (PopupHandler.js:237)
    at PopupHandler.bind (PopupHandler.js:117)
    at Colorpicker.init (Colorpicker.js:200)
    at new Colorpicker (Colorpicker.js:161)
    at HTMLInputElement.<anonymous> (plugin.js:31)
    at Function.each (jquery-3.4.1.js:367)
    at jQuery.fn.init.each (jquery-3.4.1.js:202)
    at jQuery.fn.init._jquery2.default.fn.<computed> [as colorpicker] (plugin.js:24)
    at HTMLDocument.<anonymous> (yLgzxqL:55)
    at mightThrow (jquery-3.4.1.js:3557)

(If you replace //unpkg.com/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.js with //unpkg.com/bootstrap@4.3.1/dist/js/bootstrap.bundle.js in that codepen, things work fine)

[daidensacha]

Hi, Thanks for your email, and tip with the color picker issue. I wish I had known how to contact you a week ago, as I’ve working on a project for my studies and that picker was my piece of choice. I was really impressed with the code and the features. But I just couldn’t get it working and was against the wall with a hard submission date for my work. I will keep it and play with it, and really appreciate that you took the item to email me. Regards, Daiden Sacha

…

On 8 Apr 2021, at 12:36 am, Carson Sievert ***@***.***> wrote: Here's a minimal example, adapted from https://github.com/itsjavi/bootstrap-colorpicker#with-bootstrap <https://github.com/itsjavi/bootstrap-colorpicker#with-bootstrap>, which yields the following error: https://codepen.io/cpsievert/pen/yLgzxqL <https://codepen.io/cpsievert/pen/yLgzxqL> Uncaught TypeError: Cannot read property 'tip' of undefined at PopupHandler.createPopover (PopupHandler.js:237) at PopupHandler.bind (PopupHandler.js:117) at Colorpicker.init (Colorpicker.js:200) at new Colorpicker (Colorpicker.js:161) at HTMLInputElement.<anonymous> (plugin.js:31) at Function.each (jquery-3.4.1.js:367) at jQuery.fn.init.each (jquery-3.4.1.js:202) at jQuery.fn.init._jquery2.default.fn.<computed> [as colorpicker] (plugin.js:24) at HTMLDocument.<anonymous> (yLgzxqL:55) at mightThrow (jquery-3.4.1.js:3557) By the way, if you replace ***@***.***/dist/js/bootstrap.bundle.js with ***@***.***/dist/js/bootstrap.bundle.js in that codepen, things work fine. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#327>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABJOABVH6NAQL6ZL6PZSDHLTHTM5TANCNFSM42RVFFXA>.

[cjbarth]

I experience an issue with Bootstrap 5 and this control as well. I get an error saying that this.popoverTarget.popover is not a function. When I move back to 4.x, things work fine. Given how different popovers work between Bootstrap 4 and 5, I'm not surprised this is an issue.

[itsjavi]

Have you tried loading the popover package separately?

In the "with bootstrap" example, it includes the popover package because it's loading the bootstrap bundle: /unpkg.com/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js

Edit: Ok I see that in BS5 they still have his bundle. As Chris suggested, the popover API might have changed and it's not compatible anymore :(

[hkvstore]

For Bootstrap 5, change this line:

bootstrap-colorpicker/src/js/PopupHandler.js

Line 230 in 3cf62bb

this.popoverTip = $(this.popoverTarget.popover('getTipElement').data('bs.popover').tip);

to

if (bootstrap) // Bootstrap 5  
	this.popoverTip = $(bootstrap.Popover.getInstance(this.popoverTarget[0]).getTipElement());
else // Boostrap 4
	this.popoverTip = $(this.popoverTarget.popover('getTipElement').data('bs.popover').tip);

[fritzfr]

Above solution is not complete. For me, the error is above the mentioned line:

this.popoverTarget.popover is not a function
    at PopupHandler.createPopover (bootstrap-colorpicker.js:4188)

[hkvstore]

You need to include either bootstrap 4 or 5 .js first.

[OlivierGrimard]

For Bootstrap 5.1.3, I was getting the error "Cannot read properties of null (reading 'getTipElement')" so I changed the method getInstance to use getOrCreateInstance.

this.popoverTip = $(bootstrap.Popover.getOrCreateInstance(this.popoverTarget[0]).getTipElement());

this.popoverTip = useGetInstance ? (0, _jquery2.default)(bootstrap.Popover.getInstance(this.popoverTarget[0]).getTipElement()) : (0, _jquery2.default)(this.popoverTarget.popover('getTipElement').data('bs.popover').tip);
To
this.popoverTip = useGetInstance ? (0, _jquery2.default)(bootstrap.Popover.getOrCreateInstance(this.popoverTarget[0]).getTipElement()) : (0, _jquery2.default)(this.popoverTarget.popover('getTipElement').data('bs.popover').tip);

I hope it can help someone.