Bootstrap popover is closing when click inside

Question

I have a bootstrap popover and its content is a kendo Ui color picker widget.

When you click in the color picker widget, the popover close even if the trigger option is set to focus.

Why? How to keep the popover open until a click is made outside the popover?

<a id="popover" href="#">Color Picker</a>

var $kendoColorPicker = $("<div></div>").kendoFlatColorPicker({
    value: "#ffffff"
});

$("#popover").popover({
    container: "body", 
    content: $kendoColorPicker, 
    html: true, 
    placement: "bottom", 
    trigger: "focus"
});

See a live demo here : jsfiddle

Answer 1

A different approch:

function getContent() {
  console.log("getContent");
  return $("<div></div>")
    .kendoFlatColorPicker({
    value: "#ffffff"
  }).click(function(event) {
    event.stopPropagation();
  });
}

$("#popover").popover({
    container: "body",
    content: getContent,
    html: true,
    placement: "bottom",
    trigger: "manual"}
).click(function(event) {
  $("#popover").popover('show')
  event.stopPropagation();
})

$(document).click(function() {
  $("#popover").popover('hide')
})

jsFiddle

but for some reason the slider does not work

I think you should use an alternative solution (for example "spectrum")

Answer 2

Here's a slightly simplified and generalized version of user1119279's answer:

jQuery(function ($) {
  $("[data-toggle='popover']").popover({trigger: "click"}).click(function (event) {
    event.stopPropagation();

  }).on('inserted.bs.popover', function () {
    $(".popover").click(function (event) {
      event.stopPropagation();
    })
  })

  $(document).click(function () {
    $("[data-toggle='popover']").popover('hide')
  })
})

This version also preserves the behaviour where clicking multiple times on the trigger button toggles the popover.