Popover not closed on toggle after show

[bbonch]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Create popup programmatically. Set trigger: 'manual'.
Call show then toggle. Popup does not close. You have to click toggle second time.

Reduced test cases

Reproduction steps
https://codepen.io/bbonch/pen/BagvrNM

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.3

[julien-deramond]

Thanks for reporting this issue, @bbonch.
I don't have the full history of the popover (and tooltip) as its implementation has changed several times. However, based on the documentation and the use case you've provided, I agree that it makes sense for show + toggle to hide the popover without needing to press the button twice.
I've added the 'confirmed' label. Let's wait for a JS core team member to review your PR when they have a chance. :)

[omishah]

You should be initializing the popover before setting the click listener and then it should work as intended:

Demo: https://codepen.io/hiddenme/pen/bGPZLzL

const popoverEl = document.getElementById("popover");
let popover = new bootstrap.Popover(popoverEl, {
  content: "Content",
  placement: "right",
  trigger: "manual",
  html: true
});

popoverEl.addEventListener("click", () => {
  popover.toggle();
});

[bbonch]

You should be initializing the popover before setting the click listener and then it should work as intended:

Demo: https://codepen.io/hiddenme/pen/bGPZLzL

const popoverEl = document.getElementById("popover");
let popover = new bootstrap.Popover(popoverEl, {
  content: "Content",
  placement: "right",
  trigger: "manual",
  html: true
});

popoverEl.addEventListener("click", () => {
  popover.toggle();
});

It should not. What is point of your comment?

[omishah]

You should be initializing the popover before setting the click listener and then it should work as intended:
Demo: https://codepen.io/hiddenme/pen/bGPZLzL

const popoverEl = document.getElementById("popover");
let popover = new bootstrap.Popover(popoverEl, {
  content: "Content",
  placement: "right",
  trigger: "manual",
  html: true
});

popoverEl.addEventListener("click", () => {
  popover.toggle();
});

It should not. What is point of your comment?

May be, I didn't understand your issue. Never mind :)